Using the Fetch API - Web APIs | MDN

developer.mozilla.org

Tin mới

HTML: Markup language

See all HTML references

Date & time formats

See all HTML guides

CSS: Styling language

See all CSS references

See all CSS guides

Centering an element

JavaScript: Scripting language

Standard built-in objects

Expressions & operators

Statements & declarations

See all JavaScript references

Control flow & error handing

Loops and iteration

Working with objects

See all JavaScript guides

Web APIs: Programming interfaces

Service worker API

Using the Web animation API

Working with the History API

Using the Web speech API

All web technology

Progressive web apps

Learn web development

Getting started modules

Structuring content with HTML module

CSS styling basics module

Dynamic scripting with JavaScript module

Border-image generator

Border-radius generator

Box-shadow generator

Color format converter

Cross-Origin Resource Sharing (CORS)

The Fetch API provides a JavaScript interface for making HTTP requests and processing the responses.

Setting the method

By default, fetch() makes a GET request, but you can use the method option to use a different request method:

Setting the method

By default, fetch() makes a GET request, but you can use the method option to use a different request method:

Forbidden request headers

Request headers give the server information about the request: for example, in a POST request, the Content-Type header tells the server the format of the request's body.

Sending data in a GET request

GET requests don't have a body, but you can still send data to the server by appending it to the URL as a query string. This is a common way to send form data to the server. You can do this by using URLSearchParams to en

Making cross-origin requests

Whether a request can be made cross-origin or not is determined by the value of the RequestInit.mode option. This may take one of three values: cors, same-origin, or no-cors.

Access-Control-Allow-Origin

Proxy-Authorization

Including credentials

In the context of the Fetch API, a credential is an extra piece of data sent along with the request that the server may use to authenticate the user. All the following items are considered to be credentials:

Including credentials

In the context of the Fetch API, a credential is an extra piece of data sent along with the request that the server may use to authenticate the user. All the following items are considered to be credentials:

Access-Control-Allow-Credentials

In the context of the Fetch API, a credential is an extra piece of data sent along with the request that the server may use to authenticate the user. All the following items are considered to be credentials:

Creating a Request object

The Request() constructor takes the same arguments as fetch() itself. This means that instead of passing options into fetch(), you can pass the same options to the Request() constructor, and then pass that object to fetc

Canceling a request

To make a request cancelable, create an AbortController, and assign its AbortSignal to the request's signal property.

Canceling a request

To make a request cancelable, create an AbortController, and assign its AbortSignal to the request's signal property.

Canceling a request

To make a request cancelable, create an AbortController, and assign its AbortSignal to the request's signal property.

Handling the response

As soon as the browser has received the response status and headers from the server (and potentially before the response body itself has been received), the promise returned by fetch() is fulfilled with a Response object

Checking response status

The promise returned by fetch() will reject on some errors, such as a network error or a bad scheme. However, if the server responds with an error like 404, then fetch() fulfills with a Response, so we have to check the