是否有任何理由使用 axios 而不是 ES6 fetch [关闭]

Question

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

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

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

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 而不是 polyfill 。

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

4. Axios 提供的其他功能

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

---

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

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

如果您正在编写 service worker，请使用 Fetch。

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

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 即可在实际的 Promise catch 处理程序中捕获非 200 状态错误。
3. 无需对payload进行字符串化，默认由axios处理。

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

Answer 3

Axios 是一个 NPM 库，因此适用于 Node.js 和浏览器。 fetch 是一个 Web API，不适用于 Node。相反，Node.js 有 http 模块，但没有 Fetch API。它还简化了数据传递和处理不同类型的 HTTP 请求