JavaScript/C4/Fetch-API-in-JS/English
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 |