Scribd
Upload
36 views8 pages

Fetch API in JavaScript

This document provides an overview of the JavaScript Fetch API, which is used for making asynchronous HTTP requests in web browsers. It highlights the simplicity and flexibility of the Fetch API compared to the older XMLHttpRequest object, and explains how to send requests, read responses, and handle status codes. Additionally, it mentions the use of Promise and async/await for better handling of asynchronous operations.

Uploaded by

Rahul Kumar326
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
36 views8 pages

Fetch API in JavaScript

This document provides an overview of the JavaScript Fetch API, which is used for making asynchronous HTTP requests in web browsers. It highlights the simplicity and flexibility of the Fetch API compared to the older XMLHttpRequest object, and explains how to send requests, read responses, and handle status codes. Additionally, it mentions the use of Promise and async/await for better handling of asynchronous operations.

Uploaded by

Rahul Kumar326
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/ 8

0 ( @CODE.

CLASH J

NEXT -+
( @CODE.CLASH J

Hey Everyone �
�

Javascript is everywhere. Millions of


webpages are built on JS.

in this Post, you'll learn about the


JavaScript Fetch API and how to use
it to make asynchronous HTTP
requests.

Do Like, save and Share This Post If


You Found This Helpful.

NEXT+
( @CODE.CLASH J

Fetch API
The Fetch API is a modern interface that
allows you to make HTTP requests to
servers from web browsers.
• If you have worked with
XMLHttpRequest (XHR) object.
• Fetch API can perform all the tasks as
the XHR object does.
___ • Fetch API is much simpler and cleaner.
• It uses the Promise to deliver more
flexible features to make requests to
servers from the web browsers.

NEXT+
3 ( @CODE.CLASH J

Sending a Request
The fetch() method is available in the
global scope that instructs the web
browsers to send a request to a URL.
• The fetch() requires only one
parameter which is the URL of the
resource that you want to fetch.
• When the request completes, the
promise will resolve into a Response
object.

NEXT+
s ( @CODE.CLASH J

The text() method returns a Promise that


resolves with the complete contents of
the fetched resource.

fetch{'/readme.txt')
.then{response ⇒ response.text{))
.then{data ⇒ console.log{data));

• Besides the text() method, the


Response object has other methods
such as json(), blob(), formData() and
arrayBuffer() to handle the respective
type of data.

NEXT+
4 ( @CODE.CLASH J

Reading the Response


The fetch() method returns a Promise so
you can use the then() and catch()
methods to handle it.

fetch(url)
.then((response) ⇒ {

})
.catch((error) ⇒ {

}) ;

• If the contents of the response are in


the raw text format, you can use the
text() method.

NEXT+
6 ( @CODE.CLASH J

In practice, you often use the async/


await with the fetch() method like this:

NEXT+
7 ( @CODE.CLASH J

Handling the status codes


The Response object provides the status
code and status text via the status and
statusText properties.

asyt1c fut1ctiot1 fetchText() {


let response = await fetch('/readme.txt');

console.log(response.status);
console.log(response.statusText);

if (response.status 200) {
let data = await response.text();

}
}

fetchText();

NEXT+

You might also like