Example of fetch usage in JavaScript

//Send a get request like this:
//First instantiate an XMLHttpRequest objectvar httpRequest = new XMLHttpRequest();

//Register a function that will callback when changing, httpRequest.//There are 5 possible values ​​in readyState,//0 UNSENT (not opened) The open() method has not been called yet;//1 OPENED (not sent) The send() method has not been called yet;//2 HEADERS_RECEIVED (Response header has been obtained) The send() method has been called, and the response header and response status have been returned;//3 LOADING (Response Body is being downloaded) The response body is being downloaded; some data has been obtained in responseText;//4 DONE (Request Complete) The entire request process has been completed. = function(){
 //The callback function will be called 4 times in sequence ();

 if(===4){
   //The request has been completed   if(===200){
     //http status is 200     ();

     var data = ();
     (data);
   }
 }

}

//Requested URLvar url = '/users/ruanyf';;
//This method is an initialization request. The first parameter is the requested method, such as GET, POST, PUT, and the second parameter is the requested url.('GET',url,true);

//Set http request header("Content-Type","application/json");

//Send a request, the parameter is the body to be sent. If it is a GET method, generally there is no need to send a body, set it to empty(null);

//Requested URLvar url = '/users/ruanyf';;
//Stack get requestvar promise = fetch(url).then(function(response) {

   //http status code indicating the response   if( === 200){
     //json is a method provided by the returned response, which will deserialize the returned json string into an object and is also packaged into a promise.     return ();
   }else{
     return {}
   }

});
    
promise = (function(data){
  //Response content	(data);
}).catch(function(err){
	(err);
})

fetch(url)
  .then(...)
  .catch(...)

fetch('/users/ruanyf')
	// The response received by fetch() is a Stream object	// () is an asynchronous operation that takes out all contents and converts them into JSON objects  .then(response => ()) 
  .then(json => (json))
  .catch(err => ('Request Failed', err)); 

// equivalent to the following writing methodasync function getJSON() {
  let url = '/users/ruanyf';
  try {
    let response = await fetch(url);
    return await ();
  } catch (error) {
    ('Request Failed', error);
  }
}
(getJSON());	// The obtained json data

export const winFetch = async ({
  url,
  description,
  method,
  body,
}: {
  url: string;
  description: string;
  method: string;
  body: { [key: string]: any };
}) => {
  (description, url, body);

  const res = await new Promise((resolve, reject) => {
    window
      .fetch(baseURL + url, {
        method,
        headers: { 'content-type': 'application/json' },
        mode: 'cors',
        credentials: 'include',
        body: (body),
      })
      .then((response) =>
        response?.json().then(
          (json) => resolve(json),
          (err) => reject(err),
        ),
      );
  });

  return { data: res } as { data: { data: { [key: string]: any } } };
};

export async function delete(body: { id: number }) {
  const res = await winFetch({
    url: '/aaa/bbb/delete/',
    description: 'Delete information',
    method: 'DELETE',
    body,
  });
  return ;
}

async function fetchText() {
  let response = await fetch('/users/ruanyf');
  (); // 200
  ();	// 
}
fetchText()

async function fetchText() {
  let response = await fetch('/');
  if ( >= 200 &&  < 300) {
    return await ();
  } else {
    throw new Error();
  }
}

if () {
  // Request succeeded} else {
  // Request failed}

const response = await fetch(url);

for (let [key, value] of ) { 
  (`${key} : ${value}`);  
}

// orfor (let [key, value] of ()) { 
  (`${key} : ${value}`);  
}

const response = await fetch(url);
()：According to the specified key name，Return key value。
()： Return a boolean value，Indicates whether a header is included。
()：Set the specified key name to the new key value，If the key name does not exist, it will be added。
()：Add header。
()：Delete the header。
()：Return a traverser，You can traverse all key names in turn。
()：Return a traverser，You can traverse all key values ​​in turn。
()：Return a traverser，You can traverse all key values ​​in turn对（[key, value]）。
()：Iterate over the header in turn，Each header executes a parameter function。

const response = await fetch(url);
()：Get text string，Used to obtain text data，for example HTML document。
()：get JSON Object。
()：get二进制 Blob Object，例如读取图片document，Show on the web page。
()：get FormData 表单Object，Mainly used in Service Worker in，Intercept user-submitted forms，After modifying certain data，Submit to the server。
()：get二进制 ArrayBuffer Object，主要用于获取流媒体document。

// Use() first and read the Stream.// If you call() later, there will be no content to read, so an error will be reported.let text =  await ();
let json =  await ();  // Report an error

const response1 = await fetch('');
// () Copy a Response object and read the same image twiceconst response2 = ();

const myBlob1 = await ();
const myBlob2 = await ();

 = (myBlob1);
 = (myBlob2);

const response = await fetch('');
// () method returns a traverserconst reader = ();

while(true) {
  // The read() method of this traverser returns an object at a time, indicating the content block read this time  const {done, value} = await ();
  // The done attribute is a boolean value, used to determine whether it has been read or not  if (done) {
    break;
  }
  // The value attribute is an arrayBuffer array that represents the content of the content block, and the attribute is the size of the current block  (`Received ${} bytes`)
}

fetch(url, optionObj)

const response = fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",
  mode: "cors", 
  credentials: "same-origin",
  cache: "default",
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined
});

method：HTTP Request method，POST、DELETE、PUTAll are set in this property。

headers：An object，Used to customize HTTP Requested header。

body：POST Requested data body。

cache：Specify how to handle cache。Possible values ​​are as follows：
/*
	 default: default value, first look for matching requests in the cache.
	 no-store: directly requests the remote server and does not update the cache.
	 reload: directly request the remote server and update the cache.
	 no-cache: Compare the server resources with the local cache. Only if there is a new version, use the server resources, otherwise use the cache.
	 force-cache: Cache is preferred. Only if there is no cache, the remote server will be requested.
	 only-if-cached: Only check the cache. If it does not exist in the cache, it will return a 504 error.
 */
mode: Specify the requested mode。Possible values ​​are as follows：
/*
	 cors: default value, allows cross-domain requests.
	 same-origin: Only same-origin requests are allowed.
	 no-cors: The request method is limited to GET, POST, and HEAD, and can only use a few simple headers. It cannot add complex headers across domains, which is equivalent to the request that can be made when submitting a form.
 */
credentials：Specify whether to send Cookie。Possible values ​​are as follows：
/*
	 same-origin: Default value, send cookies when requesting same origin, and not sending when requesting across domains.
	 include: Cookies are sent regardless of homologous requests or cross-domain requests.
	 omit: No sending.
 */
signal：Specify one AbortSignal Example，Used to cancelfetch()ask

keepalive：Used for page uninstallation，Tell the browser to keep connected in the background，Continue to send data。
/*
 A typical scenario is that when a user leaves the web page, the script submits some statistics on user behavior to the server.
 At this time, if the keepalive attribute is not used, the data may not be sent because the browser has uninstalled the page.
 */
redirect: Specify HTTP How to handle jump。Possible values ​​are as follows：
/*
	 Follow: Default value, fetch() jumps with HTTP.
	 error: If a jump occurs, fetch() will report an error.
	 manual: fetch() does not follow HTTP redirection, but the property will point to a new URL, and the property will become true. The developer will decide how to handle the redirection in the future.
 */
integrity：Specify one哈希值，Used for inspection HTTP Is the data sent back equal to this preset hash value?。
/*
 For example, when downloading a file, check whether the SHA-256 hash value of the file matches and ensures that it has not been tampered with.
 fetch('/file', {
   integrity: 'sha256-abcdef'
 });
 */
referrer: For settingfetchask的refererHeader。
/*
 This property can be any string or set to an empty string (that is, no referer header is sent).
 */
referrerPolicy: For settingRefererHeader的规则。Possible values ​​are as follows：
/*
	 no-referrer-when-downgrade: Default value, always sends the Referer header unless it is not sent when requesting HTTP resources from the HTTPS page.
	 no-referrer: Do not send Referer header.
	 origin: The Referer header only contains the domain name and does not contain the complete path.
	 origin-when-cross-origin: The same-origin request Referer header contains the complete path, and cross-domain requests only contain the domain name.
	 same-origin: Cross-domain requests do not send Referer, same-origin requests are sent.
	 strict-origin: The Referer header only contains domain names. The Referer header is not sent when the HTTPS page requests HTTP resources.
	 strict-origin-when-cross-origin: The Referer header contains the full path when requesting the same origin, and only the domain name is included when requesting the HTTP resource. This header is not sent when requesting HTTP resources on the HTTPS page.
	 unsafe-url: Regardless of the situation, the Referer header is always sent.
 */

let controller = new AbortController();

fetch(url, {
  signal: 
});

('abort',
  () => ('abort!')
);
// () method is used to send a cancel signal.  This will trigger the abort event, which can be listened to(); // Cancel// You can determine whether the cancel signal has been sent through the attributes(); // true

let controller = new AbortController();
setTimeout(() => (), 1000);

try {
  let response = await fetch('/long-operation', {
    signal: 
  });
} catch(err) {
  if ( == 'AbortError') {
    ('Aborted!');
  } else {
    throw err;
  }
}