Fetch 笔记
概念
// Fetch 提供了对 Request 和 Response 对象的通用定义。
// 它同时还为有关联性的概念，提供一种新的定义，取代它们原来那种分类的定义。
// fetch() 必须接受一个参数（资源的路径）。
// 无论请求是否成功，它都会返回一个 Promise 对象。
// Fetch API提供了一个全局的 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络获取资源。
// 这种功能之前是使用 XMLHttpRequest 实现的。
fetch 规范与 jQuery.ajax() 主要有三种方式不同：
- 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 505。相反，它会将 Promise 状态标记为 resolve ，仅当网络故障时或请求被阻止时，才会标记为 reject。
- fetch() 可以接收跨域 cookies。你也可以使用 fetch() 建立起跨域会话。
- fetch() 不会发送 cookies。除非你使用了 credentials 的初始化选项。
Fetch 接口
WindowOrWorkerGlobalScope.fetch()
包含了 fetch() 方法，用于获取资源
Headers
相当于 response/request 的头信息，可以使你查询到这些头信息，或者针对不同的结果做不同的操作
Request
相当于一个资源请求
Response
相当于请求的响应
Fetch mixin
Body
提供了与 response/request 中的 body 有关方法，可以定义它的内容形式以及处理方式。
支持的请求参数
// fetch() 接收两个参数
// 第一个参数是：url地址也就是请求资源的地址
// 第二个参数是：一个init对象，可选的参数
init对象代表一个配置对象，包括所有对请求的设置，可以参照：
method: 请求使用的方法，如GET、``POST。headers: 请求的头信息，形式为Headers的对象或包含ByteString值的对象字面量。body: 请求的 body 信息：可能是一个Blob、BufferSource(en-US)、FormData、URLSearchParams或者USVString对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。mode: 请求的模式，如cors、no-cors 或者same-origin。credentials: 请求的 credentials，如omit、``same-origin 或者include。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受FederatedCredential(en-US) 实例或是一个PasswordCredential(en-US) 实例。cache: 请求的 cache 模式:default、no-store、reload、no-cache、force-cache或者only-if-cached。redirect: 可用的 redirect 模式:follow(自动重定向),error(如果产生重定向将自动终止并且抛出一个错误）, 或者manual(手动处理重定向). 在Chrome中默认使用follow（Chrome 47之前的默认值是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=）。
上传 JSON 数据
// 使用 fetch() POST JSON 数据
fetch('填写url地址', {
method: 'POST',
body: JSON.stringify('这里填写对象'),
});
Fetch 的基本使用
// 配合async与await的写法
async function sendFetch() {
try {
let response = await fetch('http://localhost:5000', {
mode: 'cors', //配置跨域
});
response.json().then(res => {
console.log(res);
})
} catch (err) {
console.log("error：", err);
}
}
sendFetch();
// 在这里由于用到了 await 所以外面需要包一个 async function
// 如果是用 Express 模拟后端的数据，那么配置跨域如下：
app.use("/", (req, res, next)=> {
cosnt data = {
//...一些数据
}
// 设置允许跨域的域名，*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin", "*");
// 允许的header类型
res.header("Access-Control-Allow-Headers", "Content-Type");
// 跨域允许的请求方式
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
// 发送
res.send(data);
});
Fetch 一些注意点
// Fetch 请求默认时不带 cookie 的，需要设置 fetch(url, {creadentials: 'include'})
// 服务器返回 400， 500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch才会被rejcet。
// 所有版本的 IE 均不支持原生 Fetch，fetch-ie8 会自动使用 XHR 做 polyfill。
// IE8,9的XHR不支持CORS跨域。
