Difference between revisions of "JavaScript/C4/Fetch-API-in-JS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(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...")
 
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 Start the '''Live server'''.
+
|| 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 '''console tab'''.
+
|| 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 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.
 
* 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


Visual Cue
Narration
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
[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.


For this demonstration, I have already opened the same.


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

[Editor] Type:


<!DOCTYPE html>

<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


Press: Alt + L and Alt + O

Save the file and start the Live server.
[Firefox] Press 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.
[Editor] Type:


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.

[Editor] Highlight:


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.

[Editor] Highlight:


.then((response) => {

console.log(response);

return response.json();

})

If the state is fulfilled, .then method gets executed.
[Editor] Highlight:


(response) =>

The callback function takes the state headers as a parameter.
[Editor] Highlight:


console.log(response);

To verify this, I’m logging the raw data with the state headers.
[Editor] Highlight:


return response.json();

And here I am returning the data alone.
[Editor] Highlight:


.json();

.json method returns the data in the state headers.


This is a JS inbuilt method.

[Editor] Highlight:


then((data) => console.log(data))

Once, the data is returned to log the data, I have chained the .then method again.
[Editor] Highlight:


(data) =>

The callback function accepts the data.
[Editor] Highlight:


console.log(data)

To verify this, I’m printing the data here.
[Editor] Highlight:


.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.
[Browser] [Console Tab]:

Highlight:


Response { type: "cors", url: "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.
[Browser] [Console Tab]:

Highlight:


Object { login: "jayeshkattar", id: 10550364, node_id: "MDQ6VXNlcjEwNTUwMzY0", avatar_url: "https://avatars0.githubusercontent.com/u/10550364?v=4", gravatar_id: "", url: "https://api.github.com/users/jayeshkattar", html_url: "https://github.com/jayeshkattar", followers_url: "https://api.github.com/users/jayeshkattar/followers", following_url: "https://api.github.com/users/jayeshkattar/following{/other_user}", gists_url: "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.
[Browser] [New Tab]: [Type]:


https://github.com/jayeshkattar


[Press Enter]

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.
[Editor] Highlight:


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

I have used my username in the URL here,
[Editor] Highlight:


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

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C4/Fetch-API-in-JS/English&oldid=55178"