Difference between revisions of "JavaScript/C4/Fetch-API-in-JS/English"
Nancyvarkey (Talk | contribs) |
Nancyvarkey (Talk | contribs) |
||
(One intermediate revision by one other user not shown) | |||
Line 3: | Line 3: | ||
Author: Jayesh Katta Ramalingaiah | Author: Jayesh Katta Ramalingaiah | ||
− | Domain Reviewer: | + | Domain Reviewer: Ankita Maske |
− | Novice Reviewer: | + | Novice Reviewer: Praveeen S. |
Keywords: JavaScript, HTML, Fetch, Promise, request, response | Keywords: JavaScript, HTML, Fetch, Promise, request, response | ||
Line 38: | Line 38: | ||
|- | |- | ||
|| Slide: Pre-requisites | || Slide: Pre-requisites | ||
− | || As a pre- | + | || As a pre-requisite, |
* You need '''internet connectivity''' to practice this tutorial. | * You need '''internet connectivity''' to practice this tutorial. | ||
* You should be familiar with writing and executing''' JS''' files'''.''' | * You should be familiar with writing and executing''' JS''' files'''.''' | ||
Line 47: | Line 47: | ||
|| | || | ||
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page. | * The files used in this tutorial are available in the''' Code files''' link on this tutorial page. | ||
− | * Pls download and extract the | + | * Pls download and extract the files. |
* Make a copy and then use them for practising. | * Make a copy and then use them for practising. | ||
Line 238: | Line 238: | ||
|- | |- | ||
|| Press: Ctrl + S | || Press: Ctrl + S | ||
− | + | Switch to '''Browser''' | |
− | + | || Save the file and switch back to the '''browser.''' | |
− | + | ||
− | + | ||
− | || | + | |
|- | |- |
Latest revision as of 11:07, 21 June 2021
Title of the script: Fetch API
Author: Jayesh Katta Ramalingaiah
Domain Reviewer: Ankita Maske
Novice Reviewer: Praveeen S.
Keywords: JavaScript, HTML, Fetch, Promise, request, response
|
|
Slide: Title | Hello and welcome to the spoken tutorial on “Fetch API in JS”. |
Slide:
Learning Objectives |
In this tutorial, we will learn:
|
Slide: System Specifications | This tutorial is recorded using:
However, you may use any other browser of your choice. |
Slide: Pre-requisites | As a pre-requisite,
|
Slide: Code files |
|
Slide: Fetch API |
|
Only Narration | Now, let us take an example and understand this better. |
Show VS editor | Open Visual Studio Code editor |
[Editor] Welcome Page -> Open Folder -> Practice-JS -> index.html & main.js
|
Then open the files index.html and main.js as explained in the earlier tutorials.
|
[Editor] Type:
<html lang="en"> <head> <title> Fetch </title> </head> <body> <script src = "main.js" > </script> </body> </html> |
In the index.html file, replace the code as shown.
|
Press: Ctrl + S
|
Save the file and start the Live server. |
[Firefox] Press Ctrl + Shift + I
|
In the web browser, open the Browser developer tools panel and go to the Console tab. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
.then((response) => { console.log(response); return response.json(); }) .then((data) => console.log(data)) .catch((error) => console.log(error)); |
In the main.js file, replace the code as shown. |
Only Narration | Earlier in the series, we learnt how promises mock data using setTimeout.
|
[Editor] Highlight: | Fetch is a JS inbuilt method and is a wrapper of promise.
|
[Editor] Highlight:
console.log(response); return response.json(); }) |
If the state is fulfilled, .then method gets executed. |
[Editor] Highlight:
|
The callback function takes the state headers as a parameter. |
[Editor] Highlight:
|
To verify this, I’m logging the raw data with the state headers. |
[Editor] Highlight:
|
And here I am returning the data alone. |
[Editor] Highlight:
|
.json method returns the data in the state headers.
|
[Editor] Highlight:
|
Once, the data is returned to log the data, I have chained the .then method again. |
[Editor] Highlight:
|
The callback function accepts the data. |
[Editor] Highlight:
|
To verify this, I’m printing the data here. |
[Editor] Highlight:
|
If there are any errors, .catch method takes the error and logs the same. |
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
We have successfully verified that the fetch method returned the data with headers. |
[Browser] [Console Tab]:
Highlight:
|
Here we get the raw data of the github user. |
Only Narration | Wondering where is this data coming from?
|
Open New Tab | Open a new tab in the browser. |
[Browser] [New Tab]: [Type]:
|
In the address bar, type the URL as shown.
|
Switch to Editor | Switch back to the editor. |
[Editor] Highlight: | I have used my username in the URL here, |
[Editor] Highlight: | If you have a github account you can replace jayeshkattar with your username and try.
|
Only Narration | With this we have come to the end of this tutorial.
Let’s summarize. |
Slide: Summary | In this tutorial, we have learnt:
|
Slide: Assignment | As an assignment:
|
Slide: About Spoken Tutorial Project |
|
Slide: Spoken tutorial workshops |
|
Slide: Forum questions | Pls post your timed queries in this forum |
Slide: Acknowledgement | Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India |
Slide: Thanks | The script for this tutorial is contributed by Jayesh and this is Praveen signing off. Thank you for joining |