Fetch API 的使用和采坑记录

比 XHR 好用的 Fetch

在说 Fetch 和 XHR 之前，不得不先提一提 Axios，前端同学天天用它发送请求。所谓 Axios 其实是基于 Promise 封装的 HTTP 库。本质也是对原生 XMLHttpRequest 的封装。而原生的 XHR 由于编写过于麻烦，已被 axios 取代了，所以作为 XHR 的升级版，Fetch 应运而生，而它也确实提供了更强大和灵活的功能集。

Fetch 的使用

Fetch 天生就支持 Promise，这让它写起来非常方便，不用像 XHR 一样去判断 readyState 的各种状态：

fetch('http://www.xxx.com/').then(...).then(...).catch(...); 

当然，使用 async 和 try...catch 也是很香的。

返回的结果

注意，Fetch 会返回一个 Response 对象，以此呈现对一次请求的响应数据。以下罗列出一些常用的：

属性	类型	说明
ok	boolean	true 表示成功（HTTP 状态码的范围200-299）
body	ReadableStream	可读取的二进制内容，里面放着后端返回的数据
status	number	状态码
statusText	string	与该 Response 状态码一致的状态信息
url	string	请求地址
headers	Headers	请求头信息（看不到，通过 get 读取）

其中，需要注意的是：只有当网络故障时或请求被阻止时，才会标记为 rejected。也就是说，当接收到 404 或 500 这种表示错误的 HTTP 状态码时，返回的 Promise 也是正常的 fulfilled 状态 ，只不过此时 ok 属性为 false。

读取 Response

Response 提供了很多读取 ReadableStream 的方法：arraybuffer()、blob()、formData()、json() text()等，具体请自行参考文档。这里我们使用真实的例子，来介绍下 json() 的使用：

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits').then(resp => {console.log('response