Axios 与 Fetch：您应该使用哪个？

Question

Axios 是 Mastering JS 官方推荐的 HTTP 客户端 。 我们偶尔会使用 superagent ，但我们几乎从不使用 fetch()功能 。 原因是 Axios 大大减少了您的平均 API 请求所需的样板数量。 以下是一些原因：

Axios 是 同构 的，而 fetch 不是

大多数基本 Axios 请求的语法在 Node.js 和浏览器中都是相同的。 由于 Node.js 没有内置 fetch()函数，你需要使用像 node-fetch 。 有几个 已知的区别 fetch().

请求失败时axios抛出错误

最烦人的问题之一 fetch()是 当服务器响应 HTTP 错误状态时它不会抛出错误，例如 404 或 500 。

fetch('https://httpbin.org/post').catch(err => {
  /* No error even though the server responded with 405 */
});

axios.get('https://httpbin.org/post').catch(err => {
  err.response.status; // 405 "METHOD NOT ALLOWED"
});

然而， fetch() 路径 如果它无法到达服务器，它会抛出一个错误，所以你总是需要两个不同的错误处理 fetch(). 时情况更糟 async/await ：每 fetch()需要额外的 then()冒泡错误。

Axios 错误处理 要容易得多：只需使用 catch().

自动 JSON 和表单编码的序列化和解析

大多数现代 API 表单编码 对请求正文 Axios 自动处理 JSON 和表单编码，以及自动 序列化查询字符串 。

// Serialize JSON body and query params with fetch:
body = JSON.stringify(body);
query = new URLSearchParams(query).toString();

const res = await fetch('/myendpoint?' + query, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body
});

// Serialize JSON body and query params with axios:
await axios.post('/myendpoint', { params: query, body });

框架特性： 拦截器 和 实例

由于所有这些限制，不幸的现实是 每个使用 fetch()编写自己的包装器 fetch()，使用构建应用程序非常困难 fetch()直接地。

Axios 通过提供一些类似框架的特性让你走得更远。 您可以使用拦截器和实例来 使用 Axios 创建自己的 API 包装器 。 例如，以下是使用实例和拦截器构建 Trello API 客户端的方法：

所以 Axios 不仅消除了很多样板和粗糙的边缘 fetch()，并且还可以更轻松地为不同的 API 构建特定的包装器。