描述
Promise<Response> fetch(input[, init])
input: 定义要获取的资源，其值可以是：
- 一个字符串，包含要获取资源的
URL，一些浏览器会接受blob和data作为schemes。 - 一个
Request对象。
init: 一个配置项对象，包括所有对请求的设置。可选的参数有：
method: 请求使用的方法，如GET、POST。headers: 请求的头信息，形式为Headers的对象或包含ByteString值的对象字面量。body: 请求的body信息：可能是一个Blob、BufferSource、FormData、URLSearchParams或者USVString对象，注意GET或HEAD方法的请求不能包含body信息。mode: 请求的模式，如cors、no-cors或者same-origin。credentials: 请求的credentials，如omit、same-origin或者include，为了在当前域名内自动发送cookie，必须提供这个选项。cache: 请求的cache模式:default、no-store、reload、no-cache、force-cache或者only-if-cached。redirect: 可用的redirect模式:follow自动重定向，error如果产生重定向将自动终止并且抛出一个错误，或者manual手动处理重定向。referrer: 一个USVString可以是no-referrer、client或一个URL，默认是client。referrerPolicy: 指定了HTTP头部referer字段的值，可能为以下值之一：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url。integrity: 包括请求的subresource integrity值，例如:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=。
返回一个Promise，resolve时回传Response对象。
fetch与jQuery.ajax区别
- 当接收到一个代表错误的
HTTP状态码时，从fetch()返回的Promise不会被标记为reject， 即使响应的HTTP状态码是404或500，其会将Promise状态标记为resolve，但是返回的Promise会将resolve的返回值的ok属性设置为false，仅当网络故障时或请求被阻止时，才会标记为reject。 fetch()不会接受跨域cookies，你也不能使用fetch()建立起跨域会话，其他域的Set-Cookie头部字段将会被无视。fetch()不会发送cookies，除非使用了credentials的初始化选项。
实例
发起请求
发起一个简单的资源请求，对于fetch请求返回一个Promise对象，这个Promise对象会在请求响应后被resolve，并传回Response对象。
window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js")
.then(res => console.log(res))
设置参数
通过init配置对象设置参数，可以设置method、headers、body、mode、credentials、cache、redirect、referrer、referrerPolicy、integrity。
var headers = new Headers({
"accept": "application/javascript"
});
headers.append("accept", "application/xml");
headers.set("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36");
window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js", {
method: "GET",
headers: headers,
cache: 'no-cache',
})
.then(res => console.log(res))
Headers对象
Headers.append(): 给现有的header添加一个值, 或者添加一个未存在的header并赋值。Headers.delete(): 从Headers对象中删除指定header。Headers.entries(): 以迭代器的形式返回Headers对象中所有的键值对。Headers.get(): 以ByteString的形式从Headers对象中返回指定header的全部值。Headers.has(): 以布尔值的形式从Headers对象中返回是否存在指定的header。Headers.keys(): 以迭代器的形式返回Headers对象中所有存在的header名。Headers.set(): 替换现有的header的值, 或者添加一个未存在的header并赋值。Headers.values(): 以迭代器的形式返回Headers对象中所有存在的header的值。
响应处理
通过Response对象对响应的数据作处理，包括获取响应状态以及响应体的处理等操作。
window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js")
.then(res => res.text())
.then(data => console.log(data))
Response对象
Response对象的相关属性与方法：
Response.headers: 只读，包含此Response所关联的Headers对象。Response.ok: 只读，包含了一个布尔值，标示该Response成功，HTTP状态码的范围在200-299。Response.redirected: 只读，表示该Response是否来自一个重定向，如果是的话，它的URL列表将会有多个条目。Response.status: 只读，包含Response的状态码。Response.statusText: 只读，包含了与该Response状态码一致的状态信息。Response.type: 只读，包含Response的类型，例如basic、cors。Response.url: 只读，包含Response的URL。Response.useFinalURL: 包含了一个布尔值，来标示这是否是该Response的最终URL。Response.clone(): 创建一个Response对象的克隆。Response.error(): 返回一个绑定了网络错误的新的Response对象。Response.redirect(): 用另一个URL创建一个新的Response。
Response实现了Body接口，相关属性与方法可以直接使用：
Body.body: 只读，一个简单的getter，用于暴露一个ReadableStream类型的body内容。Body.bodyUsed: 只读，包含了一个布尔值来标示该Response是否读取过Body。Body.arrayBuffer(): 读取Response对象并且将它设置为已读，并返回一个被解析为ArrayBuffer格式的Promise对象，Responses对象被设置为了stream的方式，所以它们只能被读取一次。Body.blob():
读取Response对象并且将它设置为已读，并返回一个被解析为Blob格式的Promise对象。Body.formData():
读取Response对象并且将它设置为已读，并返回一个被解析为FormData格式的Promise对象。Body.json():
读取Response对象并且将它设置为已读，并返回一个被解析为JSON格式的Promise对象。Body.text():
读取Response对象并且将它设置为已读，并返回一个被解析为USVString格式的Promise对象。
https://segmentfault.com/a/1190000012740215
https://developer.mozilla.org/zh-CN/docs/Web/API/Headers
https://developer.mozilla.org/zh-CN/docs/Web/API/Response
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch🎨 本文大部分内容转载自他人文章，若有问题可点击文章作者查看原文