Scribd
Upload
13 views3 pages

Fetch

Uploaded by

024CSE DHARSHINI.A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views3 pages

Fetch

Uploaded by

024CSE DHARSHINI.A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!-- !

fetch -->

<!--? Synchronous -->


Synchronous means the code runs in a particular sequence of instructions given
in the program.
Each instruction waits for the previous instruction to complete its execution.

<!--? Asynchronous -->


Due to synchronous programming, sometimes imp instructions get
blocked due to some previous instructions, which causes a delay in the UI.
Asynchronous code execution allows to execute next instructions
immediately and doesn't block the flow

1. What is the fetch() API?

- The fetch() API is a modern and powerful way to make asynchronous HTTP
requests to servers in JavaScript.
- It returns a Promise that resolves to the Response object representing the
response to the request.

2. Syntax

fetch(url, options)
.then(response => {
// Handle the response
})
.catch(error => {
// Handle any errors
});

- url: The URL to which the request is sent.


- options: An optional object containing custom settings for the request, such
as method, headers, body, etc.

3. Handling the Response

- response.json(): Converts the response body into JSON. This also returns a
Promise.
4. Example Explained

let fetchedData = fetch("https://api.github.com/users");


console.log(fetchedData); // Logs the Promise object

fetchedData.then((data) => {
// First .then block to handle the response
let jsonData = data.json(); // Convert response to JSON
console.log(jsonData); // Logs the Promise of the parsed JSON

jsonData.then((finalData) => {
// Second .then block to handle the parsed JSON data
console.log(finalData); // Logs the final parsed data

finalData.map((e) => {
console.log(e.login); // Logs the 'login' property of each user
});
});
});

5. Chaining Promises

- The fetch() method returns a Promise. After calling fetch(), you can chain
multiple .then() methods to handle the response and data.
- Nested Promises: In the example, the first .then() handles the Response
object and parses it to JSON, while the second .then() handles the actual
data.
// ! taking all the data from api and print on the ui

let fetchedData1 = fetch("https://api.github.com/users")

let container = document.querySelector(".container")

fetchedData1.then((data)=>{

let jsonData = data.json()

jsonData.then((finalData)=>{

finalData.map((ele)=>{

let li = document.createElement("li")
li.innerText = ele.login;

container.append(li)
})
}).catch((err)=>{
console.log(err)
})

}).catch((err)=>{
console.log(err)
})

You might also like