从 fetch 说开，到 blob

背景

之前看过很多 fetch 相关的文章，说的都是 fetch 如何使用，以及 fetch 的优势。但是最近也发现 fetch 有很多坑。

前两天有个上传文件的需求，需要在页面上显示上传文件的进度条。之前产品线做过类似的内容，用的是 axios，通过 onUploadProgress 回调函数来获取上传进度。这次做需求的时候发现，新的产品线用的是 fetch 来处理请求。然后就发现 fetch 不支持上传进度获取。之前对 fetch 和 XMLHttpRequest 之间没有太多对比，所以这次就借机会重新了解了下两者的区别。

XHR vs Fetch

首先 fetch 和 XMLHttpRequest 都是 AJAX 技术，都是不刷新页面获取后端数据，然后在前端更新页面的方式。然后 fetch 的出现，一定程度上取代了 XMLHttpRequest。因为 fetch 的写法更加简洁，优雅，并且通过链式调用的方式而不是回调的方式处理响应。看起来 fetch 优势明显。但是 fetch 却也有很多问题。或者说有很多无法取代 XMLHttpRequest 的地方。

1. 浏览器支持：“古老”的 XMLHttpRequest 在浏览器支持方面明显有优势。fetch 则主要支持 2017 年之后的浏览器版本。因此在选择的时候一定要考虑用户的情况，再决定选择哪种请求方式。

2. cookie：fetch 向服务器发送请求的时候默认不发送 cookies，通过添加 credentials 来发送 cookies。

fetch(
    'http://domain/service',
    {
      method: 'GET',
      credentials: 'same-origin'
    }
)复制代码

3. 后端错误无法弹出：fetch 在处理 404 或者 500 错误的时候不会触发 reject，进而进入到 catch() 语句中。只有当网络错误或者其他请求无法完成的时候才会触发 catch() 语句。因此使用 fetch 的时候，对错误处理的方式会更加复杂。

4. timeout：XMLHttpRequest 可以通过下面的方式添加 timeout。

// set timeout
xhr.timeout = 3000; // 3 seconds
xhr.ontimeout = () => console.log('timeout'