Fetch basic usage

fetch('https://api.github.com/users/ruanyf')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err)); 
Copy the code

Fetch () receives Response as a Stream object, and Response.json () is an asynchronous operation that formats the content.

Await writing:

async function getJSON() { let url = 'https://api.github.com/users/ruanyf'; try { let response = await fetch(url); return await response.json(); } catch (error) { console.log('Request Failed', error); }}Copy the code

The Response object

The Promise returned by the FETCH request is usually resolve, and only reject when a network error is encountered.

Response contains data that can be read asynchronously through the Stream interface, and also contains some synchronous properties that can be read directly, such as

response.ok

Boolean value indicating whether the request was successful

response.status

Number: indicates the status code of the HTTP response

response.statusText

A character string that indicates the status of the HTTP response

response.url

The requested URL. This property returns the final URL if there is a jump to the URL.

response.type

Type of request

response.redirected

Boolean value indicating whether the request has been jumped.

Response. ok or response.status is usually used to determine the success of the request

A method to read the contents of the response

response.json()

Get the JSON object.

response.text()

You get a text string.

response.blob()

Get a binary Blob object.

response.formData()

Get the FormData form object.

response.arrayBuffer()

Get a binary ArrayBuffer object.

The above five read methods are all asynchronous and return Promise objects.

response.clone()

A Stream object can only be read once, and then it’s gone. This means that only one of the five read methods in the previous section can be used or an error will be reported.

Response object provides response.clone() method to create a copy of Response object and realize multiple reads.

The response body attribute

Response implements the Body interface and provides two properties.

response.bodyUesd

Read-only property, Boolean, indicating whether Response. body has been read.

response.body

Response.body is the underlying interface exposed by the Response object, which returns a ReadableStream object for the user to manipulate.

It can be used to read content in chunks, one of which is to show the progress of the download.

const response = await fetch('flower.jpg');
const reader = response.body.getReader();

while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  console.log(`Received ${value.length} bytes`)
}
Copy the code

In the example above, the response.body.getreader () method returns a traverser. The iterator’s read() method returns one object at a time representing the block of content that was read.

The done attribute of this object is a Boolean value to determine whether it has finished reading or not; The value property is an arrayBuffer array that represents the contents of the content block, while the value.length property is the size of the current block.