本文已参与「新人创作礼」活动，一起开启掘金创作之路
fetch的使用和取消请求
1、fetch的使用
fetch是XMLhttpRequest的升级版，
fetch的基本用法与XMLHttpRequest基本相同，有以下几点补贴：
- fetch支持promise，fetch的返回结果是promise，不使用回调函数形式，简化了写法
- fetch采用模块化设计，使功能分散在多个多个对象中，request，response，Headers等
- fetch使用数据流方式处理数据，可以分块读取（stream对象），有利于提网站性能
fetch的简单使用：
// 普通使用
fetch(url,{
method:"post",
body:"name=lily&age=18"
})
// 提交json数据
fetch(url, {
method:"POST",
body:JSON.stringify(obj)
})
fetch的第二参数
fetch的第一参数标识请求资源的地址，第二参数详细配置请求信息，详细配置如下：
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
});
其中：
mode：制定请求方式，cros允许跨于请求
credentials：是否携带cookie
cache：指定如何处理缓存
keepalive：页面卸载后，后台继续发送数据
signal：用于指定AbortSignal实例，用于取消请求
2、response对象处理请求结果
fetch请求之后得到的是一个response对象
const response = await fetch(url,{})
1、response属性有下面这些。
Response.ok
Response.ok属性返回一个布尔值，表示请求是否成功，true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。
Response.status
Response.status属性返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功请求）。
Response.statusText
Response.statusText属性返回一个字符串，表示 HTTP 回应的状态信息（例如请求成功以后，服务器返回"OK"）。
Response.url
Response.url属性返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。
2、判断是否请求成功
需要注意的是，fetch只有在网络连接错误的情况下才会报错，诸如服务端返回4xx，5xx，是不会报错的，需要单独封装错误处理
async function fetchText() {
let response = await fetch('/readme.txt');
if (response.status >= 200 && response.status < 300) {
return await response.text();
} else {
throw new Error(response.statusText);
}
}
3、取消fetch请求
fetch请求发送之后，可以使用AbortController对象取消请求
const AbortController = new AbortController()
const signal = AbortCOntroller.signal
fetch(url,{
signal: AbortCOntroller.signal
})
signal.addEventListener("abort",() => {
})
AbortController.abort()
console.log(signal.aborted)
