Axios 与 Fetch 对比

Axios 和 Fetch 都是用 JavaScript 发起 HTTP 请求的常用工具，但它们有一些关键的区别。具体区别如下：

Axios

内置功能：Axios 内置诸多功能，例如自动 JSON 转换、请求和响应拦截器以及请求取消功能。
浏览器兼容性：它支持包括 Internet Explorer 在内的旧版浏览器。
错误处理：Axios 会自动拒绝 HTTP 错误状态（例如 404 或 500）的 Promise，从而简化错误处理。
请求/响应拦截器：您可以轻松地全局修改请求或响应。
​​取消请求：Axios 提供了一种轻松取消请求的方法。

拿来

原生 API：Fetch 是一个原生 Web API，这意味着您无需安装任何其他库。
基于 Promise：它使用 Promise，但您需要手动检查响应状态是否存在错误。
流处理：Fetch 支持流式传输，这对于处理大量响应非常有用。
更多控制：您可以更好地控制请求，但设置默认值或拦截请求等功能需要更多样板代码。
不内置 JSON 支持：您需要在响应对象上调用 .json() 来解析 JSON 数据。

用例

如果您需要丰富的开箱即用功能，尤其是在复杂的应用程序中，请使用 Axios。
对于更简单的用例或希望避免外部依赖的情况，请使用 Fetch。
示例用法

Axios：

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

// axios
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() 版本进行比较，产生相同的结果：

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));

// fetch()

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 属性。fetch
() 中的数据使用 JSON.stringify 方法转换为字符串。Axios 会
自动转换从服务器返回的数据，但使用 fetch() 时必须调用 response.json 方法将数据解析为 JavaScript 对象。
使用 Axios，可以在数据对象内访问服务器提供的数据响应，而对于 fetch() 方法，最终数据可以是任何变量

结论

两者各有优势，选择通常取决于您的具体需求和偏好。如果您正在构建一个包含大量 API 交互的大型应用程序，Axios 可能会为您省去一些麻烦，而 Fetch 则非常适合简单的任务。

Axios 提供了用户友好的 API，简化了大多数 HTTP 通信任务。但是，如果您更喜欢使用浏览器原生功能，则完全可以使用 Fetch API 自行实现类似的功能。

正如我们所探讨的，使用 Web 浏览器中提供的方法复制 Axios 的基本功能是完全可行的fetch()。是否包含客户端 HTTP 库最终取决于您对原生 API 的熟悉程度以及您的具体项目需求。

更多信息请访问：https://blog.logrocket.com/axios-vs-fetch-best-http-requests/