2023 年坚持用 Axios 而选择性忽略 fetch的7个原因？

我们好，很开心又碰面了，我是”后端‬高阶‬”，由我带着我们一同高度关注后端最前沿、深入细致后端下层控制技术，我们一同不断进步，也热烈欢迎我们高度关注、点赞、珍藏、转贴!

axios vs fetch 这个是推送HTTP允诺的最差优先选择

任何人互联网允诺都须要一个辅助工具来继续执行这类操作方式，从伺服器允诺或修正 API 统计数字是绝大多数 Web 插件的关键关键组成部分。那些情景主要包括：

读取使用者关键信息从伺服器参数值修正伺服器统计数字

责任编辑将较为三种最广为采用的 HTTP 允诺库 – Axios 和 Fetch，更进一步预测为何 fetch 从2015年再次出现后 Axios 的高度关注度仍然有增无减。

1.Axios 和 Fetch API 现况概要

假如您前段时间采用过 Javascript，所以您很有可能采用过 Axios。截止编写责任编辑时， npm 统计统计数字说明它每星期被浏览 1.36 万次！

2015 年，导入了 Fetch API。开发者总算可以忘掉声名狼藉且难以采用的 HTMLHttprequests。不过，Axios 的畅销某种程度并没受到影响。恰好相反，查阅自 2015 年年来的浏览图象。

Axios 浏览图

Axios 大行其道时，没其它辅助工具像 Axios 那样更易采用。原生植物 XMLHttpRequest API 极难采用因此没提供更多所以多用途。但，为何 2015 年后 fetch 再次出现了，而我们还在始终秉持用Axios呢？

2.Axios

Axios 是用于发出互联网允诺的第三方 HTTP 客户端库。它是基于promise的，可以在以下示例中看到：

axios.get(https://codilime.com/) .then(response => console.log(response.data));

默认情况下，响应统计数字以 JSON 格式提供更多，因此可以采用 data 属性立即访问它。它在下层采用 XMLHttpRequest，这是它具有较好浏览器兼容性的其原因之一。

您可以通过内容分发互联网 (CDN) 或采用包管理器（如 npm）将其添加到您的项目中。核心功能主要包括：

在浏览器中创建 XMLHttpRequests在 node.js 环境中发出 http 允诺取消允诺拦截允诺和响应3.fetch

Fetch 和 Axios 那样，是一个基于 promise 的 HTTP 客户端。让我们看一个简单的例子:

fetch(https://codilime.com/) .then(response => response.json()) .then(console.log);

将在责任编辑后面重点介绍语法。现在，只须要知道 Fetch API 提

Fetch API 提供更多了 fetch() 方法，这将在责任编辑中对其进行深入细致研究。关键的是要知道，采用 Fetch API 可以完全实现 Axios 的所有核心功能。实际上，Fetch API 是一个原生植物接口，比 Axios 具有更多的可能性。但，因为它更加偏下层，所以通常采用起来有点麻烦。4.安装和向后兼容

Axios 和 fetch() 都可以在浏览器以及 node.js 环境中采用。

4.1 Axios

如前所述，可以采用 CDN 或包管理器安装 Axios。在浏览器中采用 Axios 时，可以采用 CDN：

在 node.js 环境中，可以采用包管理器：

采用 NPM 安装 – npm install axios采用 Yarn 安装 – yarn add axios

现在已经安装了 Axios，必须将它导入到我们的项目中：

import axios from “axios”;

就这么简单！绝大多数浏览器都广为支持 Axios，即使是像 IE11 这样的旧浏览器。

4.2 fetch

Fetch 是一个内置的 API，因此不须要安装或导入任何人东西。它在所有现代浏览器中都可用，您可以在 caniuse 上查阅它。当然， Fetch 在 node.js 中也可用。

caniuse中fetch支持情况

请记住，即使您的浏览器不支持 Fetch，您可以采用 polyfill。不过，假如必须采用这个 polyfill，你可能还须要一个 promise polyfill。

5.语法

在深入了解 Axios 和 fetch() 的更深层次的特性之前，先较为一下 Axios 和 fetch() 之间的基本语法。

5.1 推送允诺5.1.1 Axios

Axios 提供更多了多种不同的调用方式：

axios(url, { // configuration options })

或者

axios.post(url, { // configuration options })

假如省略配置选项和点符号，它默认为 GET 方法：

axios(url)

可以采用第二个参数为允诺采用不同的配置设置：

axios(url, { method: post, timeout: 1000, headers: { “Content-Type”: “application/json”, }, data: { property: “value”, }, })5.1.2 fetch

Fetch 与 axios 类似，接收两个参数。第一个参数是 URL，第二个是配置选项：

fetch(url, { method: POST, headers: { “Content-Type”: “application/json”, }, body: JSON.stringify({ property: “value”, }), })

如您所见，fetch/axios基本语法非常相似，几乎完全相同。但，存在多个小差异：

不同的属性用于 post 允诺以将推送统计数字。 Axios 采用 data 属性，而 fetch 采用 body 属性。须要将 data 序列化为 JSON 字符串来推送，而Axios 在采用 POST 方法向 API 推送 JavaScript 对象时自动将统计数字字符串化。5.2 处理响应

5.2.1 Axios

在 Axios 中，响应统计数字默认以 JSON 格式返回，所要做的就是访问响应对象的data属性：

axios.get(https://codilime.com/) .then(response => console.log(response.data));

可以采用配置选项更改响应类型，即 responseType 属性。它告诉伺服器将响应的统计数字类型，选项主要包括：

arraybufferdocumentjson (default)textstreamblob5.2.2 fetch

采用 Fetch，在访问响应统计数字之前还须要继续执行一个步骤：

fetch(https://codilime.com/) .then(response => response.json()) .then(console.log);

采用 fetch() 时，会在所有headers到达后立即收到响应。那时，还没完成HTTP 响应主体的读取。这就是收到另一个promise的其原因。简而言之，response.json() 会等待正文读取。

每天采用的 JSON 对象通常都较为小。但，想象一下您必须读取非常大的图像的情况。这可能须要一段时间，在图像完全读取之前可能须要相关关键信息。

Fetch 是一个相对下层的 API，可以精确控制读取过程。它伴随着每次采用它时必须处理两个promise的成本。Fetch 要求在处理响应时多做一步，因为它返回一个promise，此时没须要的 JSON 统计数字格式，因此须要 .json() 方法。要在 Axios 中访问响应统计数字，须要采用 data 属性，而在采用 fetch() 时，最终统计数字可以命名为任何人变量。5.3 错误处理

还记得 Axios 和 Fetch 都是基于 promise 的 HTTP 客户端吗？因此，都返回一个可以resolve或reject的promise。不过，就相似性而言，仅此而已。但resolve/reject的定义并不那样。

5.3.1 Axios

看一个典型的 Axios 错误处理示例，即采用 .catch()：

axios.get(https://codilime.com/) .then(response => console.log(response.data)) .catch((err) => console.log(err.message));

每个响应都包含一个status属性，它只是一个 HTTP 响应状态代码。那些代码表示允诺是否已成功完成。例子主要包括：

200 OK – 允诺成功，403 Forbidden——客户端无权访问内容，

您可以阅读文末资料有关那些 HTTP 响应状态代码的更多关键信息。现在知道了 HTTP 响应状态代码是什么，可以理解 Axios 错误处理是如何工作的。 Axios 将拒绝任何人状态码超出 200-299 范围（成功响应）的promise。

我们可以检查错误对象

axios.get(https://codilime.com/) .then(response => console.log(response.data)) .catch((err) => { if (err.response) { // The request was made, but the server responded with a status code that falls out of the 2xx range const { status } = err.response; if (status === 401) { // The client must authenticate itself to get the requested response } else if (status === 502) { // The server got an invalid response } … } else if (err.request) { // The request was made, but no response was received } else { // Some other error } });

当在错误对象上有response 属性时，这意味着发出了允诺，因此伺服器响应了，但响应状态代码在2xx 范围之外。另一方面，request属性表示已发出允诺，但未收到响应。假如这两者都不正确，则表示设置互联网允诺时再次出现问题，从而触发错误。

5.3.2 fetch

最关键的区别是，假如收到 HTTP 错误，它不会reject promise——不成功的响应仍然会得到resolve。因此，HTTP 错误在 .then 块中处理。只有在互联网再次出现故障的情况下，Fetch API promise才会被reject。

fetch(https://codilime.com/) .then(response => { if (!response.ok) { throw Error(`HTTP error: ${response.status}`); } return response.json(); }) .then(console.log) .catch((err) => { console.log(err.message) });

采用 Fetch API 须要检查 response.ok 属性来控制 HTTP 错误。两个最关键的响应属性是 status 和 ok：

status – 响应状态代码（整数）。ok – 检查状态是否在 2xx（布尔值）范围内的简写。

在成功的情景中，它们将分别具有 200 和 true 值：

{ … status: 200, ok: true, … }

在错误情况下，将获得 HTTP 错误状态代码和 false。例如，假如没通过身份验证来接收允诺的响应，将得到：

{ … status: 401, ok: false, … }

总之，在 Axios 中，超出 200-299 范围（成功响应）的响应将被自动拒绝。采用 .catch() 块，可以获得有关错误的关键信息，例如是否收到响应，假如收到，则返回其状态代码。

而在 fetch() 中，不成功的响应仍然得到resolve。这就是为何必须检查响应的 ok 属性并在它设置为 false 时抛出错误，然后在 .catch() 块中处理该错误。

5.4 响应超时

在设定的时间后中止允诺的功能是发出 HTTP 允诺的关键部分。假如没该功能，允诺可能会挂起并导致插件变慢。

5.4.1 Axios

采用 Axios 设置响应超时非常容易。所要做的就是在允诺的配置对象中添加一行：

axios.get(url, { … timeout: 2000, … }) .then(response => console.log(response.data)) .catch(err => console.log(err.message))

超时是一个可选参数，以毫秒为单位。假如超过两秒，上述允诺将被中止，并记录错误。 timeout 属性的默认值为 0，表示不会超时。

5.4.2 fetch

用 Fetch API 做同样的事情并不容易。要实现相同的行为，我们可以采用名为 AbortController 的接口和 fetch() 方法配置选项：

通过创建一个 AbortController 对象，可以访问 abort() 方法和信号(signal)对象。然后将超时设置为两秒，之后将采用以终止。

请注意，假如您在 fetch() 完成后调用 abort()，它只会忽视它。

fetch() 没像 Axios 那样提供更多超时配置选项。恰好相反，必须采用 AbortController 接口和 setTimeout 函数。 Axios 隐藏了很多这样的模式代码，这使其成为绝大多数用例的明显赢家。我们已经知道 Fetch 是一个下层 API，可以根据您的须要处理响应超时、允诺取消。但就这一点，明显Axios更占优势。

5.5 拦截 HTTP 允诺和响应

想象一个情景，必须保存从插件推送的每个 HTTP 允诺的日志。向每个允诺添加这样的代码很麻烦，容易出错，甚至不可行。这就是拦截器发挥作用的时候。它允许消除为每个允诺的重复代码，而是创建和设置处理允诺和响应的全局行为。

简而言之，HTTP 拦截器用于在客户端和伺服器端 HTTP 允诺和响应之间应用自定义逻辑。它们可用于不同的操作方式，例如：

修正 HTTP headers或正文设置自定义令牌修正响应

还有很多很多的可能操作方式，接下来一同看看如何创建一个在 Axios 和 Fetch 中记录统计数字的拦截器。

5.5.1 Axios

Axios 具有用于简单创建 HTTP 拦截器的功能 – 主要包括响应和允诺拦截器。首先，看一个允诺拦截器：

axios.interceptor.request.use(config => { // log data before HTTP request is sent console.log(HTTP request being sent…); return config; })

上面的代码会在推送任何人 HTTP 允诺之前产生一条日志消息。类似地，响应拦截器被定义为在它们被 then 或 catch 处理之前运行一些代码：

axios.interceptor.response.use( function (response) { // This function will be triggered on any status code inside 2xx range return response; }, function (error) { // This function will be triggered on any status code outside of 2xx range return Promise.reject(error); } )

例如，当您想要设置一个策略以在失败的情况下始终重试一次 HTTP 允诺时，响应拦截器可能会派上用场。假如您愿意，Axios 还允许您删除拦截器：

const requestInterceptor = axios.interceptor.request.use(config => { // log data before HTTP request is sent console.log(HTTP request being sent…); return config; }); axios.interceptor.request.eject(requestInterceptor);5.5.2 fetch

采用 Fetch API 时，没配置选项或特殊的内置函数来实现拦截器。不过，你可以采用Vanilla JS（一种快速、轻量级、跨平台的框架）库。下面通过手动实现一个fetch的拦截器：

fetch = (originalFetch => { return (…arguments) => { const result = originalFetch.apply(this, arguments); return result.then(console.log(HTTP request being sent …)); }; })(fetch);

上面的代码是一个 HTTP 允诺拦截器的实现，可以像采用普通的旧 fetch() 函数那样采用它：

fetch(https://codilime.com/) .then(response => response.json()) .then(console.log)

Axios 提供更多了开箱即用的功能来创建 HTTP 允诺和响应拦截器。与响应超时类似，它隐藏了大部分模板代码并为提供了一个漂亮、更易采用的接口。

另一方面， Fetch API没提供更多这样的方法。基于 fetch() 的 HTTP 拦截器虽然很容易编写，因此可以在网上随意找到。但易用性方面相对Axios没任何人优势。

5.6 浏览进度

在 XMLHttpRequests 仍然被广为采用的日子里，它是用于实现进度指示器 onprogress 的方法。今天，那些指标仍然是读取资源的关键关键组成部分，尤其是体积较大资源，或者在互联网较慢的情况下。现在一切都变的特别容易。

5.6.1 Axios

在采用axios库的时候，一般会采用axios Progress Bar来实现一个进度条。它可以通过 NPM 包获得：

npm install –save axios-progress-bar

也可以通过CDN地址：

之后，须要将 CSS 导入到 HTML 中，或者通过带有模块打包器的 JavaScript，比如 webpack：

这样就可以实现进度条了，我们必须（仅一次）调用 loadProgressBar() 函数，该函数可优先选择采用两个参数 – config 和 instance。第二个参数用于传递自定义 axios 实例。责任编辑将跳过这两个参数说明以使其尽可能简单。

上面的代码采用了 FileReader API，它允许访问 File 或 Blob 对象读取文件的内容。 FileReader.readAsDataURL() 开始读取指定 blob 的内容，完成后，FileReader.result 属性包含一个编码字符串。

代码还采用了 load 事件，它会在读取成功完成时触发，这时候再将结果插入img元素中的 src 属性中。Axios 进度条设计基于 angular-loading-bar。它采用负责在浏览器中显示读取栏的 nprogress 模块。

5.6.2 fetch

采用 Fetch API 实现进度条并不容易。没像 Axios 那样提供更多简单易用 API 的包。不过不要害怕 – 正如您可能猜到的那样，还有另一个下层API 允许实现进度条，不过可能须要更多的代码。

我们将采用 ReadableStream API。这个接口代表一个可读的字节统计数字流。此外，ReadableStream 实例存在于 Response 对象的 body 属性中，我们将采用该字节流来跟踪进度。

HTML 文件：

Progress bar

JS文件：

这是很多代码，让我们一步一步地预测它。

Progress bar

在 HTML 文件中，创建一个 img 标签，与 Axios 示例中的相同。此外，必须创建一个 div 作为进度条，因为没导入外部包，所以必须自己手动创建它。

将 div 元素保存在 el 变量中, 之后发出允诺。标准程序是检查是否存在任何人 HTTP 错误、是否支持 ReadableStream API，以及是否存在 Content-Length 的header。

所有主流浏览器都支持 ReadableStream API，您可以通过 caniuse 进行检查。因此，您可以在实现中省略第二个 if 语句。

添加第三个 if 语句，因为要访问headers，伺服器必须推送 CORS 标头 – Access-Control-Expose-Headers – “Access-Control-Expose-Headers: content-length”。此响应标头允许伺服器指示哪些响应标头应提供更多给浏览器中运行的脚本，以响应跨域允诺。现在，进入返回的响应。

… const total = parseInt(contentLength, 10); let loaded = 0; return new Response( new ReadableStream({ start(controller) { …

ReadableStream 构造函数从给定的处理程序创建并返回一个可读流对象。它接受 underlayingSource 对象，该对象包含定义所构造的流实例的行为方式的方法和属性。

在我们的例子中，唯一须要的是 start(controller) 方法。构造对象时立即调用它。它的内容应该旨在访问流源和设置流功能。控制器属性是 ReadableStreamDefaultController 或 ReadableByteStreamController，具体取决于类型属性。

const reader = response.body.getReader();

Readabl

… read(); // read() function handles each data chunk function read() { reader.read().then(({ done, value }) => { // No more data to read if (done) { controller.close(); return; } loaded += value.byteLength; progress({ loaded, total }); // Get the data and send it to the browser via the controller controller.enqueue(value); read(); }).catch(error => { console.error(error); controller.error(error); }) } …

在 read() 函数中，调用 reader 的 read() 方法，它返回一个promise，提供更多对流内部队列中下一个块的访问。假如块可用，promise将通过以下形式的对象fullfill：

{ value: theChunk, done: false, }

否则，假如流关闭，promise将通过以下形式的对象fullfill：

{ value: undefined, done: true, }

只有当流显示错误时，promise 才会被reject。

… // No more data to read if (done) { controller.close(); return; } loaded += value.byteLength; progress({ loaded, total }); // Get the data and send it to the browser via the controller controller.enqueue(value); read(); …

假如没更多统计数字要读取，须要采用 close() 方法关闭关联的流。否则，采用progress函数修正 div 元素进度。接着，采用 enqueue() 函数将给定块写入关联流中。

… console.error(error); controller.error(error); …

在 .catch 子句中，采用 error() 方法，这会导致未来与关联流的任何人交互出错。

请记住，以上只是采用 Fetch API 实现进度条的一种方式，可以参考文末资料查阅其它方式

在进度条的实现上，对于高级 Axios API，必须采用一个额外的包，即Axios Progress Bar来完成。而对于fetch来说，虽然有下层API来实现同样的功能，而且是原生植物实现，不依赖任何人的三方库，但相应的复杂度也随之上升。

5.7 同时允诺

假如您已经学会了进度条部分，您会很开心听到 Axios 和 Fetch API 都提供更多了更易采用的方式来同时发出多个允诺。一同看看实际效果。

5.7.1 Axios

在 Axios 中，创建了一个允诺数组。每个允诺的创建方式与以前相同。此外，采用 axios.all 方法发出多个 HTTP 允诺：

const endpoints = [ http://codilime.com/endpoint1, http://codilime.com/endpoint2, http://codilime.com/endpoint3, ]; axios.all( endpoints.map(endpoint => axios.get(endpoint)) ) .then(console.log)

axios.all 返回一个数组作为响应，其中每个元素对应于endpoints数组中的一个元素。因此，data[0] 获得 codilime.com/endpoint1 的响应，而 data[1] 获得 codilime.com/endpoint2 等的响应。

值得庆幸的是，Axios 还提供更多了 axios.spread 方法，它的行为类似于常规的 JavaScript 展开运算符。const endpoints = [ http://codilime.com/endpoint1, http://codilime.com/endpoint2, http://codilime.com/endpoint3, ]; axios.all( endpoints.map(endpoint => axios.get(endpoint)) ) .then(axios.spread((res1, res2, res3) => { console.log(res1.data, res2.data, res3.data); }))5.7.2 fetch

使用 Fetch API 时，可以采用 Promise.all() 方法和解构实现类似的行为：

const endpoints = [ http://codilime.com/endpoint1, http://codilime.com/endpoint2, http://codilime.com/endpoint3, ]; Promise.all( endpoints.map(endpoint => fetch(endpoint)) ) .then(async ([ res1, res2, res3 ]) => { const res1JSON = await res1.json(); const res2JSON = await res2.json(); const res3JSON = await res3.json(); console.log(res1JSON, res2JSON, res3JSON); }))

在同时发出允诺时，axios/fetch有两个非常相似的解决方案。一种利用外部库方法，另一种采用内置 JavaScript 方法。但，这两个实现的含义和流程几乎相同。

6.总结

Axios 是一个很优秀的库，彻底改变了 HTTP 允诺的处理方式，它超前于时代。不过，自发布年来，JavaScript 发生了重大变化。 Fetch API 是一个令人惊叹的下层 API，它允许您创建 Axios 中存在的任何人功能。

除了明显的上层与下层差异之外，外部库通常会导入一些风险，在做出优先选择之前应该考虑那些风险。没一个客观的统计数字可以让我们说出哪个解决方案更好，这完全取决于您的需求和偏好。

参考资料

https://codilime.com/blog/axios-vs-fetch/

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

http://vanilla-js.com/

https://www.npmjs.com/package/angular-loading-bar