Scribd
Upload
9 views

Fetch

Uploaded by

024CSE DHARSHINI.A
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Fetch

Uploaded by

024CSE DHARSHINI.A
Copyright
© © All Rights Reserved
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