fetch api
- Headers: 创建一个请求的 Header
const headers = new Headers(); headers.append('Content-Type', 'text/plain'); - Request: 创建一个 Request 对象
const request = new Request(url); console.log(request.url); // http://localhost:3001/glb/30-Inch-Wide-Drop-In-Short-Shelf-Assy-WF-SMT.glb console.log(request.method); // GET console.log(request.credentials); // same-origin - Response: 请求的返回值
3.1. Response.status: StatusCode，成功 200。
3.2. Response.statusText: StatusCode，成功就是 "OK"。
3.3. Response.ok 一个 Boolean 类型的值，判断是否正常返回，也就是 StatusCode 为 200-299。
Body 参数
Request 和 Response 中都包含 Body 的实现，包含以下内容:
- ArrayBuffer
- ArrayBufferView (Uint8Array and friends)
- Blob/File
- string
- URLSearchParams
- FormData
在 fetch 中对应的方法，并返回的都是 Promise 对象。
- arrayBuffer()
- blob()
- json()
- text()
- formData()
使用 fetch 请求一个 glb 格式的文件。
const url = './glb/30-Inch-Wide-Drop-In-Short-Shelf-Assy-WF-SMT.glb';
const request = new Request(url);
console.log(request.url); // http://localhost:3001/glb/30-Inch-Wide-Drop-In-Short-Shelf-Assy-WF-SMT.glb
console.log(request.method); // GET
console.log(request.credentials); // same-origin
const headers = new Headers();
headers.append('Content-Type', 'text/plain');
const init = {
method: 'GET',
headers,
cache: 'default',
};
const glbLoader = async () => {
const load = await fetch(request, init).then(
obj => obj.arrayBuffer(),
);
return load;
};
arrayBuffer() 最终返回的结果是这样的：
屏幕快照 2019-07-29 上午11.30.35.png
fetch 的不足之处：
- fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
- fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
- fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
- fetch没有办法原生监测请求的进度，而XHR可以
