JavaScript/C4/Fetch-API-in-JS/English - Revision history

Nancyvarkey at 05:37, 21 June 2021

2021-06-21T05:37:31Z

Pravin1389 at 15:25, 8 June 2021

2021-06-08T15:25:07Z

Nancyvarkey at 12:11, 31 May 2021

2021-05-31T12:11:00Z

Kr.jayesh: 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..."

2021-05-22T18:40:53Z

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..."

New page

Title of the script: Fetch API

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, Fetch, Promise, request, response

{| border = “1”
|| <center>'''Visual Cue'''</center>
|| <center>'''Narration'''</center>

|-
|| Slide: Title
|| Hello and welcome to the spoken tutorial on “'''Fetch API in JS'''”.

|-
|| Slide:

Learning Objectives
|| In this tutorial, we will learn:

* About '''Fetch API'''
* And its usage in '''JS'''

|-
|| Slide: System Specifications
|| This tutorial is recorded using:

* '''Ubuntu Linux''' OS version 18.04
* '''Visual Studio Code''' version 1.45.0 ('''code editor''')
* '''Firefox''' web browser

However, you may use any other browser of your choice.

|-
|| Slide: Pre-requisites
|| As a pre-requisites,

* You need '''internet connectivity''' to practice this tutorial.
* You should be familiar with writing and executing''' JS''' files'''.'''
* If not, please go through the prerequisite tutorials on this website.

|-
|| Slide: Code files
||
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
* Pls download and extract the file.
* Make a copy and then use them for practising.

|-
|| Slide: Fetch API
||
* The '''Fetch API '''provides an interface for fetching resources (including across the network)
* The '''fetch()''' '''method''' is used to fetch a resource.
* '''fetch() returns''' a '''Promise'''

|-
|| Only Narration
|| Now, let us take an example and understand this better.

|-
|| Show VS editor
|| Open '''Visual Studio Code editor'''

|-
|| <nowiki>[Editor] </nowiki>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.

For this demonstration, I have already opened the same.

These files are available in the '''Code files''' link for practice.

|-
|| <nowiki>[Editor] </nowiki>Type:

<nowiki><!DOCTYPE html></nowiki>

<nowiki><html lang="en"></nowiki>

<nowiki><head></nowiki>

<nowiki><title> Fetch </title></nowiki>

<nowiki></head></nowiki>

<nowiki><body></nowiki>

<nowiki><script src = "main.js" > </script></nowiki>

<nowiki></body></nowiki>

<nowiki></html></nowiki>
|| In the '''index.html''' file, replace the '''code''' as shown.

|-
|| Press: Ctrl + S

Press: Alt + L and Alt + O
|| Save the file and Start the '''Live server'''.

|-
|| <nowiki>[Firefox] Press</nowiki>''' Ctrl + Shift + I'''

Point to the browser '''Console''' tab
|| In the web browser, open the '''Browser developer tools''' panel and go to the '''console tab'''.

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] Type: </nowiki>

fetch("http://api.github.com/users/jayeshkattar")

.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'''.

Now, we shall make a real '''service''' across the '''network''' to get the '''data'''.

Make sure your '''device''' is connected to the '''internet''' to get '''data''', else you encounter errors.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

fetch("http://api.github.com/users/jayeshkattar")
|| '''Fetch '''is a '''JS inbuilt method''' and is a '''wrapper''' of '''promise'''.

It accepts a '''URL '''to '''GET '''the '''data'''.

On success, it '''returns''' the '''state headers '''with the '''data'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

.then((response) => {

console.log(response);

return response.json();

})
|| If the '''state '''is '''fulfilled''', '''.then''' '''method''' gets '''executed.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

(response) =>
|| The '''callback function '''takes the '''state headers '''as a '''parameter.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

console.log(response);
|| To verify this, I’m '''logging''' the '''raw data''' with the''' state headers.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

return response.json();
|| And here I am '''returning''' the '''data''' alone.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

.json();
|| '''.json method returns '''the''' data''' in the '''state headers.'''

This is a '''JS inbuilt method'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

then((data) => console.log(data))
|| Once, the '''data''' is '''returned''' to '''log''' the '''data''', I have chained the''' .then''' '''method''' again.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

(data) =>
|| The '''callback function '''accepts the '''data.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

console.log(data)
|| To verify this, I’m printing the '''data '''here.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

.catch((error) => console.log(error));
|| 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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:

'''Response { type: "cors", url: "[https://api.github.com/users/jayeshkattar https://api.github.com/users/jayeshkattar]", redirected: true, status: 200, ok: true, statusText: "OK", headers: Headers, body: ReadableStream, bodyUsed: false }'''
|| We have successfully verified that the '''fetch method returned''' the '''data''' with '''headers'''.

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:

'''Object { login: "jayeshkattar", id: 10550364, node_id: "MDQ6VXNlcjEwNTUwMzY0", avatar_url: "[https://avatars0.githubusercontent.com/u/10550364?v=4 https://avatars0.githubusercontent.com/u/10550364?v=4]", gravatar_id: "", url: "[https://api.github.com/users/jayeshkattar https://api.github.com/users/jayeshkattar]", html_url: "[https://github.com/jayeshkattar https://github.com/jayeshkattar]", followers_url: "[https://api.github.com/users/jayeshkattar/followers https://api.github.com/users/jayeshkattar/followers]", following_url: "[https://api.github.com/users/jayeshkattar/following https://api.github.com/users/jayeshkattar/following]{/other_user}", gists_url: "[https://api.github.com/users/jayeshkattar/gists https://api.github.com/users/jayeshkattar/gists]{/gist_id}", … }'''
|| Here we get the '''raw data''' of the '''github user'''.

|-
|| Only Narration
|| Wondering where is this '''data''' coming from?

These are coming from a '''github profile'''.

All the details displayed in the '''console''' are my details.

|-
|| Open New Tab
|| Open a new tab in the '''browser'''.

|-
|| <nowiki>[Browser] [New Tab]: </nowiki><nowiki>[Type]:</nowiki>

[https://github.com/jayeshkattar https://github.com/jayeshkattar]

<nowiki>[Press Enter]</nowiki>
|| In the '''address bar''', type the '''URL''' as shown.

Here, you can see all my profile details.

The details mentioned here are the same which are displayed in the '''console''' too.

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

fetch("http://api.github.com/users/jayeshkattar")
|| I have used my '''username''' in the '''URL '''here,

|-
|| <nowiki>[Editor] Highlight:</nowiki>

http://api.github.com/users/jayeshkattar
|| If you have a '''github account''' you can replace '''jayeshkattar '''with your '''username''' and try.

You will get your '''user profile''' details.

|-
|| Only Narration
|| With this we have come to the end of this tutorial.

Let’s summarize.

|-
|| Slide''': '''Summary''' '''
|| In this tutorial, we have learnt:

* About '''Fetch API'''
* And its usage in '''JS'''

|-
|| Slide: Assignment
|| As an assignment:

* Open the file '''assignment.js''' which you have created earlier.
* Clear the existing code.
* Get the weather '''data '''of '''Bengaluru '''using the below '''URL'''
* [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'''
* Open the file '''MyPage.html''' in a web browser.
* Observe the output in the browser’s '''console'''

|-
|| Slide:''' '''About Spoken Tutorial Project
||
* The video at the following link summarises the Spoken Tutorial project.
* Please download and watch it

|-
|| Slide: Spoken tutorial workshops
||
* We conduct workshops using spoken tutorials and give certificates.
* For more details, please write to us.

|-
|| 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

|}

@@ Line 3: / Line 3: @@
 Author: Jayesh Katta Ramalingaiah
-Domain Reviewer:
+Domain Reviewer: Ankita Maske
-Novice Reviewer:
+Novice Reviewer: Praveeen S.
 Keywords: JavaScript, HTML, Fetch, Promise, request, response

@@ Line 38: / Line 38: @@
 |-
 || Slide: Pre-requisites
-|| As a pre-requisites,
+|| As a pre-requisite,
 * You need '''internet connectivity''' to practice this tutorial.
 * 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.
-* Pls download and extract the file.
+* Pls download and extract the files.
 * Make a copy and then use them for practising.
@@ Line 238: / Line 238: @@
 |-
 || Press: Ctrl + S
-|| Save the file.
+Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|-
-|| Switch to '''Browser'''
-|| Switch back to the '''browser.'''
 |-

@@ Line 24: / Line 24: @@
 Learning Objectives
 || In this tutorial, we will learn:
 * About '''Fetch API'''
 * And its usage in '''JS'''
 |-
 || Slide: System Specifications
 || This tutorial is recorded using:
 * '''Ubuntu Linux''' OS version 18.04
 * '''Visual Studio Code''' version 1.45.0 ('''code editor''')
 * '''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
 || As a pre-requisites,
 * You need '''internet connectivity''' to practice this tutorial.
 * You should be familiar with writing and executing''' JS''' files'''.'''
 * If not, please go through the prerequisite tutorials on this website.
 |-
@@ Line 58: / Line 49: @@
 * Pls download and extract the file.
 * Make a copy and then use them for practising.
 |-
@@ Line 67: / Line 56: @@
 * The '''fetch()''' '''method''' is used to fetch a resource.
 * '''fetch() returns''' a '''Promise'''
 |-
@@ Line 122: / Line 109: @@
 Press: Alt + L and Alt + O
-|| Save the file and Start the '''Live server'''.
+|| Save the file and start the '''Live server'''.
 |-
@@ Line 129: / Line 116: @@
 Point to the browser '''Console''' tab
-|| In the web browser, open the '''Browser developer tools''' panel and go to the '''console tab'''.
+|| In the '''web browser''', open the '''Browser developer tools''' panel and go to the '''Console tab'''.
 |-
@@ Line 335: / Line 322: @@
 || Slide''': '''Summary''' '''
 || In this tutorial, we have learnt:
 * About '''Fetch API'''
 * And its usage in '''JS'''
 |-
 || Slide: Assignment
 || As an assignment:
 * Open the file '''assignment.js''' which you have created earlier.
 * 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]
 * 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 browser’s '''console'''
+* Observe the output in the '''browser’s  console'''
-−
-−
 |-
@@ Line 362: / Line 341: @@
 * The video at the following link summarises the Spoken Tutorial project.
 * Please download and watch it
 |-
@@ Line 370: / Line 347: @@
 * We conduct workshops using spoken tutorials and give certificates.
 * For more details, please write to us.
 |-