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