Axios 和 Fetch，哪个才是你的最佳选择？-阿里云开发者社区

Axios 和 Fetch，哪个才是你的最佳选择？

2024-06-18 304

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在前端开发中，处理 HTTP 请求是一个常见且重要的任务。JavaScript 提供了多种方式来发送网络请求，其中最受欢迎的两种方式分别就是 Fetch API 和 Axios。尽管两者都能完成同样的任务，即从客户端向服务器发送请求并接收响应，但它们在使用方式、功能及灵活性方面各有千秋，下面我们简单了解下。

在前端开发中，处理 HTTP 请求是一个常见且重要的任务。JavaScript 提供了多种方式来发送网络请求，其中最受欢迎的两种方式分别就是 Fetch API 和 Axios。尽管两者都能完成同样的任务，即从客户端向服务器发送请求并接收响应，但它们在使用方式、功能及灵活性方面各有千秋，下面我们简单了解下。

1. 基础介绍

Fetch API

Fetch API 是现代浏览器内置的一个标准 JavaScript API，用于处理 HTTP 请求。它是 XMLHttpRequest 的现代替代品，提供了一个更加强大和灵活的操作方式。Fetch 提供了一个全局 fetch() 函数，能够非常便捷地处理 GET、POST 等HTTP请求。Fetch 返回的是一个 Promise 对象，这让它可以很容易地用于异步操作。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 node.js。它是一个第三方库，因此需要通过 npm 安装。Axios 提供了一些额外的功能和优点，如自动转换 JSON 数据，客户端支持防御 XSRF 等。

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

2. 功能方面对比

错误处理

Fetch 和 Axios 在错误处理方面有一些不同。使用 Fetch 时，即使服务器返回一个 HTTP 错误状态码，它也不会自动触发 catch。只有网络故障或请求阻止时，Fetch 才会被视为拒绝（reject）。

而 Axios 会自动触发 catch，当收到的响应状态码落在2xx范围外时。

响应数据

Fetch 在处理服务器返回的数据时默认不会将其解析为 JSON，需要手动调用 .json() 方法进行转换。而 Axios 自动将所有从服务器返回的数据转换为 JSON，无需额外操作。

浏览器兼容性

Fetch 在较老的浏览器（如 IE11）中没有原生支持，需要使用 polyfill 来兼容。而 Axios 由于是一个独立的库，可以在所有支持 Promise 的浏览器中使用。

3. 使用场景建议

使用 Axios 当：

你需要广泛的浏览器支持，包括老版本浏览器。
你的项目中需要处理大量的 HTTP 请求，并且需要更丰富的配置项和简化的错误处理。
你需要使用请求和响应拦截器提供额外的功能。

使用 Fetch 当：

你的项目不需要支持老版本浏览器，或者你可以接受使用 Polyfills。
你倾向于使用现代浏览器已内置的 API，无需额外依赖。
你的请求比较简单，没有复杂的配置需求。

4. 如何生成 Axios/Fetch 代码

我们可以通过 Apifox 自动创建用于发出 HTTP 请求的 Axios 代码。

结论

Axios 和 fetch() 都是在 JavaScript 中发出 HTTP 请求的强大且可靠的方法。您可以选择更适合您的项目和风格的一个，甚至可以将两者用于不同的目的。重要的是了解它们的工作原理以及如何有效地使用它们。

Axios 和 Fetch，哪个才是你的最佳选择？