fetch 学习笔记

fetch api

1. Headers: 创建一个请求的 Header

   const headers = new Headers();
   headers.append('Content-Type', 'text/plain');
   

2. 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
   

3. 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 的实现，包含以下内容:

1. ArrayBuffer
2. ArrayBufferView (Uint8Array and friends)
3. Blob/File
4. string
5. URLSearchParams
6. FormData

在 fetch 中对应的方法，并返回的都是 Promise 对象。

1. arrayBuffer()
2. blob()
3. json()
4. text()
5. 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 的不足之处：

1. fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2. fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
3. fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4. fetch没有办法原生监测请求的进度，而XHR可以