Difference between revisions of "JavaScript/C4/Fetch-API-in-JS/English"
(Created page with "Title of the script: Fetch API Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, Fetch, Promise, request, response {| bo...") |
Nancyvarkey (Talk | contribs) |
||
Line 24: | Line 24: | ||
Learning Objectives | Learning Objectives | ||
|| In this tutorial, we will learn: | || In this tutorial, we will learn: | ||
− | |||
− | |||
* About '''Fetch API''' | * About '''Fetch API''' | ||
* And its usage in '''JS''' | * And its usage in '''JS''' | ||
− | |||
− | |||
|- | |- | ||
|| Slide: System Specifications | || Slide: System Specifications | ||
|| This tutorial is recorded using: | || This tutorial is recorded using: | ||
− | |||
− | |||
* '''Ubuntu Linux''' OS version 18.04 | * '''Ubuntu Linux''' OS version 18.04 | ||
* '''Visual Studio Code''' version 1.45.0 ('''code editor''') | * '''Visual Studio Code''' version 1.45.0 ('''code editor''') | ||
* '''Firefox''' web browser | * '''Firefox''' web browser | ||
− | However, you may use any other browser of your choice. | + | However, you may use any other '''browser''' of your choice. |
|- | |- | ||
|| Slide: Pre-requisites | || Slide: Pre-requisites | ||
|| As a pre-requisites, | || As a pre-requisites, | ||
− | |||
* 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'''.''' | ||
* If not, please go through the prerequisite tutorials on this website. | * If not, please go through the prerequisite tutorials on this website. | ||
− | |||
− | |||
|- | |- | ||
Line 58: | Line 49: | ||
* Pls download and extract the file. | * Pls download and extract the file. | ||
* Make a copy and then use them for practising. | * Make a copy and then use them for practising. | ||
− | |||
− | |||
|- | |- | ||
Line 67: | Line 56: | ||
* The '''fetch()''' '''method''' is used to fetch a resource. | * The '''fetch()''' '''method''' is used to fetch a resource. | ||
* '''fetch() returns''' a '''Promise''' | * '''fetch() returns''' a '''Promise''' | ||
− | |||
− | |||
|- | |- | ||
Line 122: | Line 109: | ||
Press: Alt + L and Alt + O | Press: Alt + L and Alt + O | ||
− | || Save the file and | + | || Save the file and start the '''Live server'''. |
|- | |- | ||
Line 129: | Line 116: | ||
Point to the browser '''Console''' tab | Point to the browser '''Console''' tab | ||
− | || In the web browser, open the '''Browser developer tools''' panel and go to the ''' | + | || In the '''web browser''', open the '''Browser developer tools''' panel and go to the '''Console tab'''. |
|- | |- | ||
Line 335: | Line 322: | ||
|| Slide''': '''Summary''' ''' | || Slide''': '''Summary''' ''' | ||
|| In this tutorial, we have learnt: | || In this tutorial, we have learnt: | ||
− | |||
− | |||
* About '''Fetch API''' | * About '''Fetch API''' | ||
* And its usage in '''JS''' | * And its usage in '''JS''' | ||
− | |||
− | |||
|- | |- | ||
|| Slide: Assignment | || Slide: Assignment | ||
|| As an assignment: | || As an assignment: | ||
− | |||
− | |||
* Open the file '''assignment.js''' which you have created earlier. | * Open the file '''assignment.js''' which you have created earlier. | ||
* Clear the existing code. | * Clear the existing code. | ||
Line 352: | Line 333: | ||
* [http://api.openweathermap.org/data/2.5/weather?q=Bengaluru&appid=4e8fe55b900263c5f83603ed631e15ad http://api.openweathermap.org/data/2.5/weather?q=Bengaluru&appid=4e8fe55b900263c5f83603ed631e15ad] | * [http://api.openweathermap.org/data/2.5/weather?q=Bengaluru&appid=4e8fe55b900263c5f83603ed631e15ad http://api.openweathermap.org/data/2.5/weather?q=Bengaluru&appid=4e8fe55b900263c5f83603ed631e15ad] | ||
* Log weather '''data '''in the '''console''' | * Log weather '''data '''in the '''console''' | ||
− | * Open the file '''MyPage.html''' in a web browser. | + | * Open the file '''MyPage.html''' in a '''web browser'''. |
− | * Observe the output in the | + | * Observe the output in the '''browser’s console''' |
− | + | ||
− | + | ||
|- | |- | ||
Line 362: | Line 341: | ||
* The video at the following link summarises the Spoken Tutorial project. | * The video at the following link summarises the Spoken Tutorial project. | ||
* Please download and watch it | * Please download and watch it | ||
− | |||
− | |||
|- | |- | ||
Line 370: | Line 347: | ||
* We conduct workshops using spoken tutorials and give certificates. | * We conduct workshops using spoken tutorials and give certificates. | ||
* For more details, please write to us. | * For more details, please write to us. | ||
− | |||
− | |||
|- | |- |
Revision as of 17:41, 31 May 2021
Title of the script: Fetch API
Author: Jayesh Katta Ramalingaiah
Domain Reviewer:
Novice Reviewer:
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-requisites,
|
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 | Save the file. |
Switch to Browser | 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 |