是否有任何理由使用 axios 而不是 ES6 fetch

Question

研究了 axios 和 ES6 fetch 的文档，我发现两者非常相似，并且受到 $.ajax 及其缩写的强烈影响。

axios 的主要优点是浏览器支持。

那么如果我使用 babel-polyfill - 没有理由使用 axios，我是对的吗？

原文由 Sasha Kos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Axios 而不是 Fetch 的几个原因：

1. 能够监控请求进度

这更多是 XMLHttpRequest（支持 axios）或 Fetch API 之间的问题。

Fetch API 目前不提供任何方式来获取请求进度通知，例如，该功能支持大文件上传的反馈机制。

另一方面，Axios 内置了这个功能：

 axios.post('/api', data, {
    onUploadProgress: ({ total, loaded }) => {
        // update progress
    }),
})

1. 错误处理

当您的后端返回 500 Internal Server Error 响应代码时， fetch 不会将其与 200 OK 区别对待。

在大多数情况下，这会带来不便，因为您之前对响应的所有假设都不再有效。

大多数情况下，当从服务器收到错误响应时，您希望尽快中止处理管道，并切换到错误处理案例。

 fetch(url)
    .then(reponse => {
        if (!(status >= 200 && status < 300)) {
            return Promise.reject(new Error("Invalid response status"));
        }

        return response;
    })
    .then(response => response.json())
    .then(/* normal processing */)
    .catch(/* error handling */);

这并不难实现，但您可能希望在某种抽象下捕获此逻辑以避免重复，这使我们更接近 Web API 抽象，即 Axios。

如果响应返回错误状态，Axios 会做一些理智的事情并拒绝承诺。与 axios 的大多数事情一样，这种行为是可定制的。

1. 测试

axios 有 moxios ，fetch 有 fetch-mock 。

这两个库都很棒，但根据我的经验， fetch-mock 需要额外的设置才能让 Jest 使用 mocked fetch 而不是 polyfilled 库。

我也喜欢 moxios.wait() 返回一个承诺，该承诺将在匹配请求后得到解决。

1. Axios 提供的其他功能

例如，您可以配置一个拦截器，它将 api 密钥添加到所有请求参数，或监视活动请求以显示加载屏幕。

---

使用一个选项而不是另一个选项的原因可能因实际要求和便利性而异。

如果您需要监控进度，请使用 Axios（或 XMLHttpRequest）。

如果您正在编写服务工作者，请使用 Fetch。

否则，使用对您来说更方便的方法。

原文由 mpontus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个：

 fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title,
      body
    })
  }).then((res) => {
    if (res.ok) {
      return res.json()
    }

    throw new Error(res.responseText);

  })
  .then((data) => console.log(data))
  .catch((err) => console.log(err))

基本上可以用 axios 来表达：

 axios.post('https://jsonplaceholder.typicode.com/posts', {
    title,
    body
  }).then((data) => console.log(data))
  .catch((err) => console.log(err))

所以本质上：

1. 不需要做 res.json() , res.text() 等
2. 无需处理 res.ok 以捕获实际承诺中的非 200 状态错误 catch 处理程序。
3. 无需对 payload 进行字符串化处理，默认情况下由 axios 处理。

总体而言 axios 提供更高级别和简单的 api 来处理请求。

原文由 Karen Grigoryan 发布，翻译遵循 CC BY-SA 4.0 许可协议