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

From Script | Spoken-Tutorial
Jump to: navigation, search

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


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-requisite,
  • 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 files.
  • 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

Switch to Browser

Save the file and 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=55268"