Axios 和 Fetch API？选择正确的 HTTP 客户端

TL;DR: Axios 和 Fetch API 是流行的 HTTP 客户端。 Axios 提供更多功能和更简单的错误处理，而 Fetch API 是轻量级的并且是浏览器原生的。对于复杂的项目选择 Axios，对于简单的项目选择 Fetch

处理异步 HTTP 请求的两种最常见的方法是 fetch() 和 Axios。尽管这是一种常见的操作，但您选择使用的请求类型可能会对应用程序的可用性和整体效率产生相当大的影响。因此，明智的做法是在选择之前彻底检查它们并权衡它们的利弊。

本文将全面比较这两种广泛使用的工具，帮助您为您的项目做出最佳选择。

什么是 Axios？

是一个基于 Promise 的第三方 HTTP 客户端，常见于浏览器 ( XMLHttpRequests ) 和 Node.js (HTTP) 环境中。它提供了一个方便的 API，能够拦截请求和响应、执行请求取消以及自动将响应数据解析为 JSON 格式。 Axios 还支持针对 XSRF（跨站点请求伪造）的客户端保护。您可以使用 npm 等包管理器安装 Axios 或通过 CDN 将其添加到您的项目中。

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

axios的优点

• 自动取消请求。
• 内置错误处理、拦截器和简洁的语法。
• 与各种旧式和现代浏览器的兼容性。
• 基于承诺。

axios的缺点

• 外部依赖。
• 捆绑包尺寸大且复杂性明显。

什么是 fetch()？

Fetch API 也是基于 Promise 的，但它是所有现代浏览器中都可用的本机 JavaScript API。它还与 Node.js 环境兼容，并用更简单、更现代的方法替换了旧版 XMLHttpRequests。 Fetch API 提供 fetch() 方法发送请求，支持 JSON、Blob、FormData 等多种请求和响应类型。

fetch() 的优点

• 原生浏览器支持，因此无需外部依赖。
• 轻量级且更简单的 API。
• 基于承诺。
• fetch() 是一个低级 API。因此，它提供了更细粒度的控制。

fetch() 的缺点

• 与 Axios 相比，错误处理和请求超时的内置功能有限。
• 常见任务的详细代码。

axios 和 fetch() 之间的区别

既然您现在了解了 Axios 和 fetch() 是什么，让我们通过代码示例来比较和对比这两者的一些关键功能。

基本语法

就语法而言，Axios 提供了比 fetch() 更紧凑且对开发人员友好的语法。

使用 Axios 的简单 POST 请求：

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

与 fetch() 类似的 POST 请求：

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2 id="Post-Created">Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

这是非常值得注意的，尽管 fetch() 是轻量级的，但它仍然需要更多的手动工作来执行一些常见任务。例如，Axios带有自动JSON解析功能，可以直接访问响应的数据对象。相反，在 fetch() 中，您必须手动解析 JSON 格式的响应。尽管两种方法都产生相似的结果，但您必须显式处理 fetch() 中的错误、序列化和标头。

错误处理

处理错误是开发者几乎每天都会遇到的事情。例如，axios 默认将任何状态代码超出 2xx 范围的 HTTP 调用视为错误。它为您提供了一个解释性对象，可用于管理和调试错误。

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

fetch() 不会自动将 HTTP 错误（状态代码 4xx 或 5xx）视为错误。您必须手动执行条件检查来识别响应状态以捕获错误。但是您可以在项目中使用自定义错误处理逻辑来收集信息并处理错误，就像 Axios 一样。

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

与浏览器的向后兼容性

如果您需要与旧版依赖项兼容，例如 Internet Explorer (IE11) 等旧版浏览器或大多数现代浏览器的旧版本，您的首选解决方案是 Axios。

fetch() 是现代浏览器原生的，并且可以与它们无缝运行。但是，它不支持某些较旧的浏览器版本。你仍然可以将它与像whatwg-fetch这样的polyfill一起使用，以使其在不使用fetch()的浏览器中工作。但需要注意的是，使用 polyfill 可能会增加包的大小并影响性能。

！(https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Fetch-compatibility.png)

HTTP拦截器

HTTP 拦截器允许拦截请求和响应，并在以下情况下派上用场：

• 修改请求（例如，向标头添加身份验证时）。
• 转换响应（预处理响应数据）。
• 全局处理错误（遇到 401 未经授权时记录和重定向）。

这个强大的功能是 Axios 开箱即用的，但 fetch() 本身并不支持。

使用 Axios 将身份验证令牌添加到请求中：

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

但是，这并不意味着fetch()不能执行HTTP拦截。您可以使用中间件手动编写自定义包装器来模仿此行为。

使用 fetch() 包装器将身份验证令牌添加到请求中：

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2 id="Post-Created">Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

响应超时

响应超时是指客户端等待服务器响应的时间。如果达到此时间限制，则该请求将被视为不成功。 Axios 和 fetch() 支持请求超时，这在处理不可靠或缓慢的网络时至关重要。尽管如此，Axios 通过提供更直接的超时管理方法而处于领先地位。

Axios 请求超时：

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

fetch() 请求超时：

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

Axios 使用超时选项通过更干净的代码更简单、更优雅地处理超时。但是，fetch() 需要使用 AbortController() 进行手动超时处理，这使您可以更好地控制请求中止的方式和时间。

GitHub 参考

有关更多详细信息，请参阅 GitHub 存储库上的 Axios 与 Fetch 的完整示例。

结论

与许多工具一样，Axios 和 Fetch API 都有优点和缺点。如果您需要自动解析 JSON、集成错误处理和拦截器来简化复杂的流程，请选择 Axios。如果您想要一个最适合现代浏览器环境并且不需要外部库的纯净简单的界面，请选择 fetch()。简而言之，两者都工作得很好，但它们适合不同级别的复杂性和功能要求。

相关博客

• 处理 JavaScript 中 HTTP 错误的 5 个最佳实践
• 用于处理 HTTP 请求的 5 个最佳 Chrome 扩展
• 如何将 ASP.NET HTTP 处理程序和模块迁移到 ASP.NET Core 中间件
• 使用 Fetch 请求高效处理 Syncfusion ASP.NET MVC DataGrid 中的 CRUD 操作

以上是Axios 和 Fetch API？选择正确的 HTTP 客户端的详细内容。更多信息请关注PHP中文网其他相关文章！