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

以上是Axios 与 Fetch的详细内容。更多信息请关注PHP中文网其他相关文章！