preface

 The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
Copy the code

The Fetch API provides an interface to Fetch resources (including across domains). Anyone who has ever worked with XMLHttpRequest should be able to get started, but the new API offers a much more powerful and flexible set of features.

This is the first sentence in the official API, and you can see that FETCH is a new addition to the Web API to replace XMLHttpRequest’s Web request framework, which is much more powerful. Let’s see how it works.

Fetch

Fetch actually returns a Promise function. Let’s start with a complete request code:

const url = '192.168.32.45:8081 / login. SHTML'

fetch(url, {
	method: 'POST',
	headers: {
		'Accept': 'application/json'.'Content-Type': 'application/json',
	},
	body: JSON.stringify({
		username: 'fll',
		password: '123'
	})
})
.then((response) => {
	if(response.status == 200) {
		return response
	}
})
.then((data) => {
	return data.text()
}).then((text) => {
	console.log('Request successful', text)
}).catch((err) => {
	console.log('Request error', err)
})
Copy the code

The fetch parameter has two parameters. The first parameter is the URL, which is the path of the request.

Request

The other is the Request object, which includes the following:

  • methodRequest method:GET,POST.
  • headers: Request header information in the form ofHeadersObject orByteString. The example above is the header of a JSON request.
  • bodyRequest parameters: May be oneBlob,BufferSource,FormData,URLSearchParamsorUSVStringObject. Pay attention toGET 或 HEADMethod request cannot containbodyInformation.
  • mode: Request mode. Such ascors.no-cors.same-origin.navigate
  • cache: Cache mode, such asdefault.reload.no-cache

See Reques for more information

If you’re not familiar with request Headers, see Headers here

Response

Above we said that the fetch returns a Promise object. And then it carries the Response object.

The Response object:

  • Properties:

    • status (number)– HTTP request result. The value ranges from 100 to 599. 200 indicates success
    • statusText (String)– Status report returned by the server
    • ok (boolean)– True if 200 is returned indicating success
    • headers (Headers)– Returns header information, described below
    • url(String)Requested address

  • Methods:

    • text()In order tostringGenerates a request in the form of text
    • jsonGenerate json.parse (responseText) results
    • blobTo generate aBlob
    • arrayBuffer()To generate aArrayBuffer
    • formDataGenerate formatted data for other requests

  • Other methods:

    • clone()
    • Response.error()
    • Response.redirect()

response.headers

  • has(name) (boolean)Determines whether the header exists
  • get(name) (String)Get the data for the header
  • getAll(name) (Array)Get all header data
  • set(name, value)Add the headers content
  • delete(name)Delete header information
  • forEachRead the header information through a loop

The resources

ES6 Fetch asynchronous request

Fetch the official API

Fetch API and Ajax (XMLHttpRequest) differences