Fetch API
一，Fetch API 介绍
Fetch API提供了一个 JavaScript 接口，用于访问和操纵HTTP的请求和响应等。提供了一个全局 fetch()方法来跨网络异步获取资源。
fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。
二，基本用法：
fetch('https://test.com/api/info')
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log('Request Failed', err));async function getJSON() {
let url = 'https://test.com/api/info';
try {
let response = await fetch(url);
return await response.json();
} catch (error) {
console.log('Request Failed', error);
}
}三，请求
fetch()的第二个参数：定制 HTTP 请求
fetch()的第一个参数是 URL，还可以接受第二个参数，作为配置对象，定制发出的 HTTP 请求。
fetch(url, optionObj)
上面命令的optionObj就是第二个参数。
HTTP 请求的方法、标头、数据体都在这个对象里面设置。下面是一些示例。
const response = await fetch(url, {
method: 'POST',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
},
body: 'foo=bar&lorem=ipsum',
});const json = await response.json();上面示例中，配置对象用到了三个属性。
method：HTTP 请求的方法，POST、DELETE、PUT都在这个属性设置。
headers：一个对象，用来定制 HTTP 请求的标头。
body：POST 请求的数据体。
注意，有些标头不能通过headers属性设置，比如Content-Length、Cookie、Host等等。它们是由浏览器自动生成，无法修改。
三，Response 对象
fetch()请求成功以后，得到的是一个 Response 对象。它对应服务器的 HTTP 回应。
const response = await fetch(url);
前面说过，Response 包含的数据通过 Stream 接口异步读取，但是它还包含一些同步属性，对应 HTTP 回应的标头信息（Headers），可以立即读取。
async function fetchText() {
let response = await fetch('/readme.txt');
console.log(response.status);
console.log(response.statusText);
}上面示例中，response.status和response.statusText就是 Response 的同步属性，可以立即读取。
标头信息属性有下面这些：
1，Response.ok属性返回一个布尔值，表示请求是否成功，true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。
2，Response.status属性返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功请求）。
3，Response.statusText属性返回一个字符串，表示 HTTP 回应的状态信息（例如请求成功以后，服务器返回"OK"）。
4，Response.url属性返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。
5，Response.type属性返回请求的类型。可能的值如下：
basic：普通请求，即同源请求。
cors：跨域请求。
error：网络错误，主要用于 Service Worker。
opaque：如果fetch()请求的type属性设为no-cors，就会返回这个值，详见请求部分。表示发出的是简单的跨域请求，类似<form>表单的那种跨域请求。
opaqueredirect：如果fetch()请求的redirect属性设为manual，就会返回这个值，详见请求部分。
6，Response.redirected属性返回一个布尔值，表示请求是否发生过跳转。
读取内容的方法
Response对象根据服务器返回的不同类型的数据，提供了不同的读取方法。
response.text()：得到文本字符串。response.json()：得到 JSON 对象。response.blob()：得到二进制 Blob 对象。response.formData()：得到 FormData 表单对象。response.arrayBuffer()：得到二进制 ArrayBuffer 对象。
上面5个读取方法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。
参考：
https://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API