axios 终于内置了 fetch adapter 的支持！

axios 团队于本月（5月）20号，发布了 1.7.0 版本^[1]，正式内置了 fetch adapter 的支持！

所谓“fetch adapter”，其实就是基于 Fetch API^[2] 封装的一个 axios 适配器。

axios 内部是通过适配器模式提供跨平台支持的。浏览器环境使用 XMLHttpRequest API 发起请求，而在 Node 端则使用内置 http/https 模块发起请求。

axios 通过制定统一的上层 API，抹平了底层这 2 个 API 的差异，可以让你在不同平台都能获得一样的使用体验。这也是 axios 推出之后受欢迎的原因。

截止目前，axios 仓库已在 Github 平台收获了 104K 颗星，npm 每周下载量也超过了 4800 多万，是一个十足的明星项目。

而在内置 fetch adapter 后，就统一了 axios 内部的请求方案。

理论上，内部只要有 fetch adapter 这 1 个适配器就够了。不过，由于兼容问题，可以预想，这 3 个适配器还会长期共存。

启用 Fetch Adapter

在此之前，我们需要先将 axios 升级至最新版本。

npm：

pnpm install axios@latest

CDN:

<!-- jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- unpkg CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

升级完成后，axios 默认是不会启用 fetch adapter，你需要明确指定 adapter: 'fetch' 配置启用：

import axios from 'axios'

const fetchAxios = axios.create({
  adapter: 'fetch'
});

以上，我们就创建了基于 Fetch API 方案的 axios 实例。接下来，就可以向之前一样使用了。

文本响应：

const {data} = await fetchAxios.get('/', {
  responseType: 'text'
});
// '{"code":200,"description":"OK"}'
console.log(data)

JSON 响应：

const {data} = await fetchAxios.get('/', {
  responseType: 'json'
});
// { code: 200, description: 'OK' }
console.log(data)

更多测试案例，大家可以参考 `test/unit/adapters/fetch.js` 测试文件^[3]。

关于 Fetch Adapter

过去由于 Node.js 迟迟没有实现 Fetch API，导致 axios 内部要同时实现 2 个内置 adapter：基于 XMLHttpRequest API（适应于浏览器环境）的 xhr.js^[4] 和基于 Node 端（适应于 Node 环境）的 http.js^[5]。

当然，axios 社区上也有一些方案，比如 @vespaiach/axios-fetch-adapter^[6]、@haverstack/axios-fetch-adapter^[7]，不过始终不是主流。

Fetch API 其实是一套标准 Web API，并不受平台限制。浏览器环境很早就支持了^[8]；Node.js 最终在 v16.15.0 增加了对 Fetch API 的实验性支持^[9]，并在 v21.0.0 正式支持。目前（2024.05） Node.js 的 LTS 版本是 v20.13.1。

也就是说，现在是到了可以安全使用 Fetch API 的节点时间了。

不过，在此之前 Fetch API 一直被诟病的无法监听上传、下载进度的事件。在 fetch adapter 中通过 response.body/request.body 这 2 个 Stream 对象提供了渐进支持^[10]。

参考资料

[1]

1.7.0 版本: https://github.com/axios/axios/releases/tag/v1.7.0

[2]

Fetch API: https://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html

[3]

test/unit/adapters/fetch.js 测试文件: https://github.com/axios/axios/blob/v1.7.0/test/unit/adapters/fetch.js

[4]

xhr.js: https://github.com/axios/axios/blob/v1.7.0/lib/adapters/xhr.js

[5]