【轮子】rf -- 一个基于 Fetch 的请求库

rf -- request base on Fetch，就是一个基于 Fetch 的请求库。

现在，浏览器的发展使得我们可以使用 es 的一些新特性，而无需考虑到兼容性的问题。比如 promise，之前还是需要引用 polyfill 才行，但现在基本上每个浏览器都已经支持了。这使得我们可以写更少更简洁的代码。

在之前，发送 ajax 请求时，我们会对 XMLHTTPRequest 进行一层封装，使得支持 promise 形式的调用，类似这样：

function request() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHTTPRequest();
    ...
    xhr.onload = () => {
      if (xhr.status === 200 || xhr.status < 300) {
        resolve();
      } else {
        reject()
      }
    }
  });
}
复制代码

现在，我们可以直接使用 Fetch 来发送请求，无需额外的进行代码封装。

fetch("/some-spi")
  .then(response => response.json())
  .then(data => console.log(data));
复制代码

Fetch 提供了一个更好的替代方法，而且这也很容易被其他技术使用，例如 Service Workers。但其提供的全局 fetch()方法， 跟 ajax 还是有一些区别的。如

1.当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

2.默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

所以，如果我们直接使用 fetch 方法的时候，没有进行额外的封装处理的话，那么业务代码每个进行请求的时候，都要去判断一下返回的是否 ok。这会使得我们的代码很冗余。这就是为什么需要有 rf 的出现了。r2 其实已经对 fetch 进行了一层的封装，我写 rf 时也是参考了这个库的代码实现，但还是有一些不同的，如

• 使用 ts 实现
• 当 HTTP 响应错误的状态码，会将 Promise 标记为 reject
• 支持 timeout

github 地址 github.com/liuhanqu/re…，欢迎提意见，觉得还行就顺便给个赞呗哈哈。