大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

高级前端进阶

前言

由于使用简单，一些开发人员更喜欢 Axios 而不是内置 fetch API。然而，许多人高估了引入 Axios 库的必要性，因为确实还有一些 Axios 的可行替代方案。

Axios 的支持者非常清楚安装模块是多么简单，开发者可以通过运行 npm install Axios 来获取资源。本文将重点介绍 Axios，包括 Axios 是什么，如何使用 Axios，同时也介绍了几个 Axios 的可行替代方案。

Axios 的独特优势

Axios 是一个 Node.js 和浏览器端基于 Promise 的 HTTP 客户端。使用 Axios 执行 HTTP 请求非常简单、高效，开发者还可以直接将包含配置设置和数据的对象传递给 Axios() 方法。

然而，除了 Axios 外，Fetch API 一直就是其强大的挑战者，但是由于 Axios 为开发人员提供了一些独特功能，使得在开发中 Axios 比 Fetch API 更具优势。比如下面 Axios 的独特优势：

支持多个请求和响应拦截。
有效的错误管理
防止跨站点请求伪造的客户端保护
响应超时
重新发送请求的能力
支持 Internet Explorer 11 等较旧的浏览器
JSON 数据自动处理
上传进度

正是由于以上 Axios 的独特优势，开发人员更喜欢 Axios 而不是 Fetch API 。但是，为什么本文会说 Axios 并不是最可靠的 HTTP 客户端呢。那是因为，Axios 本身也有自己的一些局限期：

需要安装和导入（在 JavaScript 中不是原生的）
潜在的代码冲突
第三方库增加网站或应用的体积和负担

接下来一起来看看 Axios 的几个可行替代方案。

Fetch

Fetch API 提供了一个 JavaScript 接口，用于处理请求和响应。尽管 Fetch API 在浏览器已经可用了很长一段时间，但由于一些限制，直到 Node.js v17.5 才引入对 fetch API 的支持。以下是使用 Fetch API 的请求示例：

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

使用 fetch 的优缺点也很明显，优点主要包括：

浏览器原生支持，比如：Chrome>42，Safari>10.1，FireFox>39，Opera>29 等都已经支持
JavaScript 标准：XMLHttpRequest 的标准化、轻量级替代品

但是 fetch 的缺点也很明显：

请求和响应都需要一个额外的 JSON 转换阶段。
由于 Fetch 始终返回响应（除非网络故障），因此有必要管理请求响应和一些潜在问题
不支持旧版浏览器
仅在浏览器客户端可用（从 Node.js v17.5 引入了对 fetch API 的支持）

GraphQL

GraphQL 很受欢迎，而 HTTP 是 GraphQL 最常用的客户端-服务器协议。GraphQL 可以在所有认证中间件之后部署，这使开发者可以访问与 HTTP 端点处理程序相同的会话和用户信息。但是，开发者首先预先安装它。

GraphQL HTTP 服务器可以处理 GET 和 POST 方法。 GraphQL 的概念模型，是一个实体图，因此，GraphQL 中的属性没有 URL。GraphQL 服务器在单个 URL/端点上工作。它对特定服务的所有查询都应在此端点进行路由。GraphQL 的优点很明显：

客户可以指定想要从服务器获得什么数据，并以可预测的方式接收这些数据。
GraphQL 是严格类型的，允许 API 用户知道哪些数据可以访问以及它们以什么形式存在。
GraphQL 可以在单个请求中获取多个资源。
GraphQL 不存在获取不足和获取过多的问题。但是 GraphQL 的缺点也很明显，主要包括：
无论查询是否成功，它总是返回 200 的 HTTP 状态码。
缺少内置缓存支持
请求复杂。如果有一个基本的 REST API 并且随着时间的推移使用总体上稳定的数据，应该继续使用它。

SuperAgent

SuperAgent 是一个小型 HTTP 请求库，开发者可以使用它在 Node.js 和浏览器中进行 AJAX 查询，它提供回调和基于 Promise 的 API。在基于 promise 的 API 之上使用 async/await 只是其语法特征之一。

SuperAgent 有许多插件可用于缓存预防（ cache prevention）、数据转换、为 URL 添加后缀或前缀等任务。使用以下命令，开发者可以安装 SuperAgent：

const superagent = require('superagent');

// callback
superagent
  .post('/api/pet')
  .send({ name: 'Manny', species: 'cat' }) // sends a JSON post body
  .set('X-API-Key', 'foobar')
  .set('accept', 'json')
  .end((err, res) => {
    // Calling the end function will send the request
  });
// promise with then/catch
superagent.post('/api/pet').then(console.log).catch(console.error);

// promise with async/await
(async () => {
  try {
    const res = await superagent.post('/api/pet');
    console.log(res);
  } catch (err) {
    console.error(err);
  }
})();

Superagent 有以下明显优点：

Superagent 以提供易用的接口来执行 HTTP 请求而闻名，插件生态非常丰富
Superagent 提供了 Stream API 和 Promise API，同时支持需求取消，请求失败时重试

Superagent 的缺点也很明显：

不像 XMLHttpRequest 那样提供上传进度跟踪。
不支持计时器、元数据错误（Metadata Errors）和 hooks。

Redaxios

Redaxios 是一个不错的 Axios 替代品，由 Jason Miller（Preact 的创建者）构建。 Redaxios 通过使用浏览器的原生 Fetch API 实现了 Axios 的类似功能，只有 1kb 的包大小，所有现代浏览器、构建工具都支持它，包括 Next.js、Create React App 和 Preact CLI 等。

Redaxios 的存在使开发者可以在难以证明依赖性的情况下使用相同的 API，同时使得开发者无需在 Axios 和 Fetch 之间做出选择，而是采用“成年人的世界，我都要”的魄力！

可以通过如下方式直接使用:

import axios from 'redaxios';
// use as you would normally

ky

由 sindresorhus 大神开发、维护，这个大神在 NPM 上有 1k+个包，还维护了 N 多了 macOS 开源软件和 iOS 开源软件，是实实在在的宝藏男孩。

Ky 的目标是现代浏览器和 Deno。对于旧版浏览器，需要转译并使用 fetch polyfill 和 globalThis polyfill。对于同构需求（Node.js + 浏览器，如 SSR），可以使用 ky-universal。ky 是一个没有任何依赖关系的小文件。如下图所示，压缩后只有 3.2K 大小。

ky 具有以下特点：

更简单的 API
方法快捷方式 (ky.post())
将非 2xx 状态代码视为错误（重定向后）
重试失败的请求
JSON 选项
超时设置
网址前缀选项
具有自定义默认值的实例
支持 hooks 下面是使用 ky 的简单示例:

import ky from 'ky';
const json = await ky
  .post('https://example.com', { json: { foo: true } })
  .json();
console.log(json);
//=> `{data: ''}`

相比下面原生 fetch 代码来说，更加简洁：

class HTTPError extends Error {}

const response = await fetch('https://example.com', {
  method: 'POST',
  body: JSON.stringify({ foo: true }),
  headers: {
    'content-type': 'application/json',
  },
});

if (!response.ok) {
  throw new HTTPError(`Fetch error: ${response.statusText}`);
}

const json = await response.json();

console.log(json);
//=> `{data: ''}`

如果使用的是 Deno，请从 URL 导入 Ky。例如，使用 CDN：

import ky from 'https://esm.sh/ky';

本文总结

本文主要和大家介绍开发者为何需要Axios！Axios的5个可行替代方案！包括：ky、Redaxios、SuperAgent、GraphQL 、Fetch。因为篇幅有限，文章并没有过多展开，如果有兴趣，可以直接在我主页继续阅读，但是文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/ladjs/superagent

https://www.webscrapingapi.com/axios-alternative

https://www.zhihu.com/question/39556105

https://www.npmjs.com/package/ky

https://www.npmjs.com/package/redaxios

泽兴芝士网

一站式 IT 编程学习资源平台

为何需要Axios!Axios的5个热门替代方案!

前言