Axios 与 Fetch

葡萄牙语版本

axios 和 fetch 是在 javascript 中发出 http 请求的流行工具，但它们有一些关键的区别。总结如下：

阿克西奥斯

• 内置功能：axios 具有许多内置功能，例如自动 json 转换、请求和响应拦截器以及请求取消。
• 浏览器兼容性：支持旧版浏览器，包括 internet explorer。
• 错误处理：axios 自动拒绝 http 错误状态（例如 404 或 500）的 promise，使错误处理更容易。
• 请求/响应拦截器：允许您以简单的方式全局修改请求或响应。​​
• 请求取消：axios 提供了一种简单的方法来取消请求。

拿来

• 原生 api：fetch 是原生 web api，这意味着无需安装额外的库。
• promise-based：使用promise，但需要手动检查响应状态是否有错误。
• 流处理：fetch 支持流，这对于处理大型响应非常有用。
• 更多控制：提供对请求的更多控制，但需要更多额外代码来实现设置模式或拦截请求等功能。
• 没有内置对 json 的支持：您需要在响应对象上调用 .json() 来解析 json 数据。

使用案例

• 如果您需要一组丰富的开箱即用功能，特别是对于复杂的应用程序，请使用 axios。
• 使用 fetch 来实现更简单的用例或当您想避免外部依赖时。

使用示例

axios：

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'post',
  headers: {
    'accept': 'application/json',
    'content-type': 'application/json;charset=utf-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

获取：

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

笔记：

• 为了发送数据，fetch() 使用 post 请求的 body 属性，而 axios 使用 data 属性。
• 使用 json.stringify 方法将 fetch() 中的数据转换为字符串。
• axios 会自动转换服务器返回的数据，但使用 fetch() 时，需要调用 response.json() 方法将数据解析为 javascript 对象。
• 使用 axios，可以在数据对象内访问服务器提供的数据响应，而在 fetch() 方法中，最终的数据可以用任意变量命名。

结论

两者都有各自的优点，选择通常取决于您的具体需求和偏好。如果您正在构建具有大量 api 交互的大型应用程序，axios 可以使某些任务变得更容易，而 fetch 非常适合简单的任务。

axios 提供了一个用户友好的 api，可以简化大多数 http 通信任务。但是，如果您更喜欢使用本机浏览器功能，您绝对可以使用 fetch api 自己实现类似的功能。

正如我们所探索的，使用浏览器中可用的 fetch() 方法复制 axios 的核心功能是完全可行的。包含客户端 http 库的决定最终取决于您对本机 api 的舒适度以及项目的具体要求。

更多信息：https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59