Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
22 views

Fetch API

The document discusses the Fetch API and provides examples of using it to make GET and POST requests, handle errors, use async/await syntax, and add headers. The Fetch API allows making network requests to fetch resources and uses promises to handle responses.

Uploaded by

kuldeepchahar426
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Fetch API

The document discusses the Fetch API and provides examples of using it to make GET and POST requests, handle errors, use async/await syntax, and add headers. The Fetch API allows making network requests to fetch resources and uses promises to handle responses.

Uploaded by

kuldeepchahar426
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

FETCH API

INTRODUCTION
&
EXAMPLES

in

Jaspreet Kaur
1. FETCHING DATA WITH GET REQUESTS

The simplest use case for the Fetch API is to fetch


data from a server using a GET request. Here's an
example:

fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

This code fetches data from the specified URL and


logs the response data to the console. The fetch()
method returns a promise that resolves to a
Response object. We then use the json() method
on the response object to extract the JSON data
from the response.
Jaspreet Kaur
1. SENDING DATA WITH POST REQUESTS

You can also use the Fetch API to send data to the
server using a POST request. Here's an example:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Jaspreet Kaur
1. HANDLING ERRORS

Network requests can fail for various reasons, such


as a server error or a network connectivity issue. To
handle errors in Fetch API, you can use the catch()
method on the returned promise. Example :-

fetch('https://jsonplaceholder.typicode.com
/posts/999')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Jaspreet Kaur
1. USING ASYNC/AWAIT WITH FETCH API

The Fetch API also works well with the async/await


syntax, which allows for cleaner and more readable
code. Example:
async function fetchUserData(userId) {
const response = await
fetch(`https://jsonplaceholder.typicode.com/use
rs/${userId}`);
const data = await response.json();
return data;
}
fetchUserData(1)
.then(data => console.log(data))
.catch(error => console.error(error));

Jaspreet Kaur
1. ADDING HEADERS TO FETCH REQUESTS

You can also add custom headers to your Fetch


requests to provide additional information to the
server. Example:

const headers = new Headers();


headers.append('Authorization', 'Bearer token');

fetch('https://api.example.com/data', {
headers: headers
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Jaspreet Kaur
Jaspreet Kaur

FOLLOW FOR MORE

You might also like