概述
在前端开发中，常常需要通过网络请求来获取或修改数据，因此选择一种合适的 HTTP 请求库是至关重要的。本文将会对比 Vue.js 中最常用的两种 HTTP 请求库：Axios 和 Fetch，分析它们的优缺点和适用场景。
Axios
介绍
Axios 是一个基于 promise 的 HTTP 请求库，它支持浏览器和 Node.js 平台。它十分易用，并且提供了丰富的拦截器、错误处理等功能。
优点
- 非常易用。
Axios 可以很轻松地在 Vue 组件中使用，它提供了简单的 API，因此在使用上也比较容易。例如：
axios.get(url) .then(response => console.log(response.data)) .catch(error => console.error(error))
- 提供丰富的功能。
Axios 提供了请求和响应的拦截器、请求的取消、自动转换 JSON 数据、自动处理 XSRF 等常见的功能，可以帮助我们更加自由地定制请求和响应的处理。例如：
axios.interceptors.response.use(response => {
// ...
return response
}, error => {
// ...
return Promise.reject(error)
})- 社区支持。
由于 Axios 相对 Fetch 更加流行，因此在社区上可以更加方便地找到相关的 Issue 和代码示例。如果遇到问题，可以在社区中得到较为快速的解决。
缺点
- 体积较大。
Axios 包含了许多拓展功能，导致 Octet Stream 格式的 gzip 压缩包体积为 21.7kb，这远大于包含 Fetch 的库 node-fetch 的体积。
- 无法取消非重复请求。
在请求被发送之后，我们无法随意取消一个响应，因为 promise 只能够在返回锁定的情况下取消。如果我们需要取消一次请求，必须使用 CancelToken。例如：
let source = axios.CancelToken.source();
axios.get(url, { cancelToken: source.token})
.then(response => console.log(response.data))
.catch(error => console.error(error))
source.cancel('Operation canceled');Fetch
介绍
Fetch 是用于获取和发送 HTTP 请求的 API。它提供了一种更加简单的方法来替代 XMLHttpRequest 对象，并支持 Promise 风格的响应。Fetch API 不需要额外的库支持，因为它的 API 是原生的。
优点
- 更加简洁。
Fetch 的操作方式更加简单明了，不需要了解额外的 API 协议，也无需为每个请求添加额外的配置。例如：
fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error))
- 不需要额外的库支持。
Fetch API 是原生的，因此不需要额外的库支持，也可以直接应用在浏览器上使用。
- 支持流和跨域访问。
支持流和跨域访问是 Fetch 比较显着的优势。
缺点
- 无法取消请求。
在 Fetch 中，我们没有办法取消一个发送的请求。
- 返回数据格式问题。
Fetch 的默认返回格式是 Response，需要通过 .json() 方法转换为 JSON 数据，以及手动处理错误。
-- -------------------- ---- -------
----------
-------------- -- -
---------------- -
----- --- ------------------
- ---- -
------ ----------------
-
--
---------- -- ------------------
------------ -- ---------------------总结
根据以上分析，如果需要使用类似拦截器、取消请求等高级功能，那么我们应该选择 Axios；如果功能需求不是那么高，则可以选择 Fetch，这种方法更加轻便。
当然，面对这两种请求库时，我们需要综合考虑不同的场景，选择合适的 HTTP 请求库来满足接口请求的需求。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e578495b1f8cacd5ff6a8