作者：


Hong1

链接：https://juejin.cn/post/7381456484427628570

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

1. 基础介绍

Fetch API

Fetch API^[1] 是现代浏览器内置的一个标准 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^[2] 是一个基于 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^[3] 错误状态码，它也不会自动触发 catch。只有网络故障或请求阻止时，Fetch 才会被视为拒绝（reject）。

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

响应数据

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

浏览器兼容性

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

3. 使用场景建议

使用 Axios 当：

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

使用 Fetch 当：

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

4. 如何生成 Axios/Fetch 代码

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

结论

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

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。