axios 与 fetch 的区别 - 网站源码_资源分享

那时为我们撷取：axios 与 fetch 的差别

转自chan：https://zhuanlan.zhihu.com/p/353492075

Fetch较之Axios来说基本上没任何人竞争优势（除应用程序原生植物全力支持），Axios方方面面都比Fetch好用，Fetch要想同时实现Axios的许多机能还须要全自动展开PCB。

我撷取了两个较为大的中文网站的允诺图：

提前布局：

axios 与 fetch 的区别

YouTube：

axios 与 fetch 的区别

chan

axios 与 fetch 的区别

须要注意的是：Axios是对XMLHtt

它们最大的不同点在于Fetch是应用程序原生植物全力支持，而Axios须要引入Axios库。

本篇文章着重会从下面几项内容展开较为：兼容性基本语法响应超时对数据的转化HTTP拦截器同时允诺

1. 兼容性问题

Axios可以兼容IE应用程序，而Fetch在IE应用程序和许多老版本应用程序上没受到全力支持，但是有一个库可以让老版本应用程序全力支持Fetch即它就是whatwg-fetch，它可以让你在老版本的应用程序中也可以使用Fetch，并且现在很多中文网站的开发都为了减少成本而选择不再兼容IE应用程序。

注意：在较为旧的浏览器上面可能还须要使用promise兼容库。

2. 允诺方式

下面我们来看一下如何使用Axios和Fetch展开允诺。

Axios：const options = { url: “http://example.com/”, 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：const url = “http://example.com/”;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) => { console.log(response.status);});其中最大的不同之处在于传递数据的方式不同，Axios是放到data属性里，而Fetch则是须要放在body属性中。

4. 响应超时

Axios的相应超时设置是非常简单的，直接设置timeout属性就可以了，而Fetch设置起来就远比Axios麻烦，这也是很多人更喜欢Axios而不太喜欢Fetch的原因之一。

axios({ method: “post”, url: “http://example.com/”, timeout: 4000, // 允诺4秒无响应则会超时 data: { firstName: “David”, lastName: “Pollock”, },}) .then((response) => { /* 处理响应 */ }) .catch((error) => console.error(“允诺超时”));

Fetch提供了AbortController属性，但是使用起来不像Axios那么简单。

5. 对数据的转化

Axios还有非常好的一点就是会自动对数据展开转化，而Fetch则不同，它须要使用者展开全自动转化。

// axiosaxios.get(“http://example.com/”).then( (response) => { console.log(response.data); }, (error) => { console.log(error); });// fetchfetch(“http://example.com/”) .then((response) => response.json()) // 须要对响应数据展开转换 .then((data) => { console.log(data); }) .catch((error) => console.error(error));

Fetch提供的转化API有下面几种：

arrayBuffer()

blob()

json()

text()

formData()

使用Fetch时你须要清楚允诺后的数据类型是什么，然后再用对应的方法将它展开转换。

Fetch可以通过许多PCB同时实现Axios的自动转化机能，至于如何同时实现由于我没去研究过。

6. HTTP拦截器

Axios的一大卖点就是它提供了拦截器，可以统一对允诺或响应展开许多处理，相信如果看过一个较为完整的项目的允诺PCB的话，一定对Axios的拦截器有一定的了解，它是一个非常重要的机能。

使用它可以为允诺附加token、为允诺增加时间戳防止允诺缓存，以及拦截响应，一旦状态码不符合预期则直接将响应消息通过弹框的形式展示在界面上，比如密码错误、服务器内部错误、表单验证不通过等问题。

axios.interceptors.request.use((config) => { // 在允诺之前对允诺参数展开处理 return config;});// 发送GET允诺axios.get(“http://example.com/”).then((response) => { console.log(response.data);});

而Fetch没拦截器机能，但是要同时实现该机能并不难，直接重写全局Fetch方法就可以办到。

fetch =((originalFetch) => { return (…arguments) => { const result = originalFetch.apply(this, arguments); return result.then(console.log(“允诺已发送”)); };})(fetch);fetch(“http://example.com/”) .then((response) => response.json()) .then((data) => { console.log(data); });

7. 同时允诺

同时允诺在项目中用的不多，但是偶尔可能会用到。

Axios：

axios.all([ axios.get(“https://api.github.com/users/iliakan”), axios.get(“https://api.github.com/users/taylorotwell”), ]) .then( axios.spread((obj1, obj2) => { … }) );

Fetch：

Promise.all([ fetch(“https://api.github.com/users/iliakan”), fetch(“https://api.github.com/users/taylorotwell”),]) .then(async ([res1, res2]) => { const a = await res1.json(); const b = await res2.json(); }) .catch((error) => { console.log(error); });

8. 应用程序原生植物全力支持

Fetch唯一碾压Axios的一点就是现代应用程序的原生植物全力支持。

本着负责的态度（其实是因为这篇文章写得较为困难…因为我对Fetch的研究不深）在这几天，我多次尝试使用Fetch，习惯后觉得还挺好用的，最主要是应用程序原生植物就全力支持，不像Axios须要引入一个包，而且须要即时测试某些接口直接在Chrome应用程序中使用Fetch展开允诺，尤其是编写爬虫或脚本的时候，你在当前网页打开Chrome的控制台使用Fetch基本上不须要什么配置就可以直接展开允诺。

axios 与 fetch 的区别