fetch, request, response, headers


GlobalFetchfetch() 方法用于发起获取资源的请求。它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象。
当发生网络错误时,fetch()的promise对象会返回一个TypeError错误,http状态为404的请求不视为网络错误
fetch(input, init).then(function(response) { ... });
Request() 和 fetch() 接受同样的参数。你甚至可以传入一个已存在的 request 对象来创造一个拷贝
// 跟XHR 相比不能取消请求,AbortController
// 自己处理进度事件Stream
// 没了同步请求
这个很有用,因为 request 和 response bodies 只能被使用一次(译者注:这里的意思是因为设计成了 stream 的方式,所以它们只能被读取一次)。
创建一个拷贝就可以再次使用 request/response 了,当然也可以使用不同的 init 参数。

fetch配置:
  • method: 请求使用的方法,如 GETPOST。
  • headers: 请求的头信息,形式为 Headers 对象或 ByteString
  • body: 请求的 body 信息:可能是一个 BlobBufferSourceFormDataURLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
  • mode: 请求的模式,如 cors、 no-cors 、navigate(get html page)、websocket或者 same-origin。// 用于sw?
    //no-cors: 能完成请求,不能读取响应,但能用于其它api,e.g: .respondWith(fetch('//594mantou.com', {mode: 'no-cors'}))
  • credentials: 请求的 credentials,如 omit(默认)same-origin 或者 include。 // 如果不设置 服务器将不能通过请求头设置cookie(xhr 不会)
  • cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
  • redirect follow, error, or manual. // 貌似没用?
fetch('https://html.spec.whatwg.org/').then(function(response) {
var reader = response.body.getReader();
var bytesReceived = 0;
// 读取响应体需要blob()等待或者读取字节流
reader.read().then(function processResult(result) { // 读取一块,fetch只返回header
if (result.done) {
console.log("Fetch complete");
return;
}
bytesReceived += result.value.length;
console.log(`Received ${bytesReceived} bytes of data so far`);

return reader.read().then(processResult); //读取下一块
});
});