Fetch API的介绍和使用

Posted on

目前的JS项目的网络传输部分基本都被axios和新api fetch承包了，作为原生API的fetch一度被认为是XHR的更优解决方案，很大原因是其自带的Promise属性。

XHR 和 fetch() 的快速比较

先来看一个传统的XHR

1
2
3
4
5
6
7
8
9
10
11
12
const xhr = new XMLHttpRequet()

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return

    if (xhr.status >= 200 && xhr.status < 300) {
        console.log(JSON.parse(xhr.responseText))
    }
}

xhr.open('GET','https://enter.chenhaotaishuaile.com/api/get_recent_posts')
xhr.send()

而fetch的实现如下

1
2
3
fetch('https://enter.chenhaotaishuaile.com/api/get_recent_posts')
    .then((res) => res.json())
    .then((data) => console.log(data))

Fetch的常见问题

  • Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: ‘include’})
  • 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

主要在于第二点被一些开发人员所诟病，认为，请求返回错误也应该被Reject，但实际上是，我认为，这个措施跟XHRHttpRequest的readyState和Status分开处理一样道理的，都是为了分清楚错误源，更好的去排查是服务端方面的问题还是网络方面的问题，更重要的是，实际上如果遇到状态码规定不规范的情况，就更需要开发人员自行去确定这个请求是不是合法的了。