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

前言

由于使用简单，一些开发人员更喜欢 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