点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！
哈喽，大家好，我是
xy👨🏻💻。在 Web 开发中，HTTP 请求库是每个前端工程师都会打交道的工具。
axios 以其强大的功能和灵活的 API 赢得了广泛的好评，是许多人的首选。
然而，随着 Alova.JS 的出现，我有了一个新的选择，它让我开始考虑是否真的需要继续使用 axios。
什么是 Alova.JS？
Alova.JS 是一个轻量级的 HTTP 请求库，它允许开发者以声明式的方式处理复杂的请求场景。
通过支持多种请求适配器，Alova.JS 能够灵活地集成到各种项目中，无论是使用 axios、fetch 还是 XMLHttpRequest。
Alova.JS 的特性
Alova.JS 拥有许多令人印象深刻的特点：
跨框架支持：Alova.JS 能够在 Vue、React、Svelte 等流行的 UI 框架中使用。 简洁的 API 设计：与 axios 相似的 API 设计，使得熟悉 axios 的开发者能够迅速上手。 高性能请求策略：开箱即用的高性能请求策略，提升应用的响应速度和流畅度。 体积小：Alova.JS 的体积小，只有 axios 的 30%左右，对性能的影响更小。 高灵活性：兼容任意请求库，如 axios、superagent 或 fetch-api。 多种数据缓存模式：提升请求性能，降低服务端压力。 丰富的扩展功能：支持自定义请求适配器、存储适配器、中间件以及 states hook。 服务端渲染（SSR）支持：在服务器端也能发挥重要作用。 请求共享：避免同时发送相同的请求，减少不必要的数据传输。 数据预拉取：用户可以更快看到信息，提升体验。 实时自动状态管理：自动管理请求状态，减少手动管理的复杂性。 交互式文档和示例：丰富的文档和示例，帮助开发者快速学习和使用。 Typescript 支持：为使用 Typescript 的开发者提供完整的类型支持。 支持 tree shaking：生产体积往往小于 4kb，有助于减少应用的最终打包体积。
Alova.JS 与 axios 的对比
虽然 axios 是一个非常优秀的库，但 Alova.JS 在某些方面表现出了它的优势：
API 设计：Alova.JS 的 API 设计简洁直观，易于理解和使用。 大小和性能：Alova.JS 的体积小，加载速度快，对性能的影响更小。 生态系统和社区支持：Alova.JS 虽然相对较新，但其社区正在快速成长。
我为什么考虑弃用 axios？
更小的体积：在移动设备和性能敏感的应用中，每一 KB 的减少都至关重要。Alova.JS 的体积小，对性能的影响小，这让我更倾向于使用它。 更简洁的 API：Alova.JS 的 API 设计简洁，易于理解和使用。这让我可以减少编写和维护代码的工作量。 高性能的请求策略：Alova.JS 提供了开箱即用的高性能请求策略，有助于提升用户体验。
如何使用 Alova.JS？
安装
Alova.JS 支持多种适配器，这意味着你可以根据项目需求选择最合适的适配器。
以下是一些常用的适配器及其安装方法：
模拟数据适配器
此 mock 插件是一个 alova 的请求适配器，与传统的 Proxy 形式不同，你可以很好地控制使用 mock 数据的使用范围。
你可以控制全局范围、某一组接口范围，甚至是某一个接口的启用和禁用。
这在实际的业务场景中非常有用，每一次的迭代都会新增或修改一组接口，我们希望让之前的功能还是走已开发好的接口，而让新增或修改的接口走模拟数据。
# 安装模拟数据适配器
npm install alova @alova/mock --save
Fetch 适配器
fetch 适配器是 alova 的预定义的请求适配器，通过它可以使用 fetch API 的所有功能。
# Fetch适配器无需额外安装，直接使用
XMLHttpRequest 适配器
XMLHttpRequest 适配器允许你在不支持 fetch 的环境中使用 Alova.JS。
# 安装XMLHttpRequest适配器
npm install alova @alova/adapter-xhr --save
Axios 适配器
axios 适配器使得 Alova.JS 能够利用 axios 的强大功能，发送 HTTP 请求和处理请求响应。
# 安装axios适配器
npm install alova @alova/adapter-axios axios --save
Uniapp 适配器
此插件只支持 vue3 版本的 uniapp 应用。
# 安装Uniapp适配器
npm install alova @alova/adapter-uniapp @alova/shared --save
Taro 适配器
此插件只支持 react 16.8+、vue3 版本的 taro 应用。
# 安装Taro适配器
npm install alova @alova/adapter-taro --save
创建 Alova 实例
使用axiosRequestAdapter作为 Alova 的请求适配器来创建 Alova 实例：
import { createAlova } from 'alova';
import { axiosRequestAdapter } from '@alova/adapter-axios';
const alovaInst = createAlova({
requestAdapter: axiosRequestAdapter()
});
发送请求
你可以像在 web 环境中使用 axios 一样发送请求。
Alova 已经完全兼容 axios，你可以在创建 method 实例的配置中指定 axios 支持的全部配置项：
const list = () =>
alovaInst.Get('/list', {
paramsSerializer: params => {
return Qs.stringify(params, { arrayFormat: 'brackets' });
}
});
const { loading, data } = useRequest(list);
上传文件
使用FormData上传文件，这个FormData实例会被传递到 axios 中，与 axios 上传文件的用法保持一致：
const uploadFile = imageFile => {
const formData = new FormData();
formData.append('file', imageFile);
return alovaInst.Post('/uploadImg', formData);
};
const { loading, data, uploading, send: sendUpload } = useRequest(uploadFile, {
immediate: false
});
const handleImageChoose = ({ target }) => {
sendUpload(target.files[0]);
};
下载文件
将请求 URL 指向文件地址即可下载：
const downloadFile = () =>
alovaInst.Get('/bigImage.jpg', {
responseType: 'blob'
});
const { loading, data, downloading, send, onSuccess } = useRequest(downloadFile, {
immediate: false
});
onSuccess(({ data: imageBlob }) => {
const anchor = document.createElement('a');
anchor.href = URL.createObjectURL(imageBlob);
anchor.download = 'image.jpg';
anchor.click();
URL.revokeObjectURL(anchor.href);
});
const handleImageDownload = () => {
send();
};
使用自定义的 axios 实例
如果你需要使用自定义创建的 axios 实例，可以这样做：
const customAxios = axios.create({
// ...
});
const alovaInst = createAlova({
requestAdapter: axiosRequestAdapter({
axios: customAxios
})
});
模拟请求适配器兼容
在开发应用时，我们可能需要用到模拟请求。
默认情况下，模拟请求适配器(@alova/mock)的响应数据是一个Response实例。当使用 axios 适配器时，我们需要让模拟请求适配器的响应数据是AxiosResponse兼容的，错误实例是AxiosError：
import { defineMock, createAlovaMockAdapter } from '@alova/mock';
import { axiosRequestAdapter, axiosMockResponse } from '@alova/adapter-adapter-axios';
const mocks = defineMock({
// ...
});
// 模拟数据请求适配器
export default createAlovaMockAdapter([mocks], {
httpAdapter: axiosRequestAdapter(),
...axiosMockResponse
});
export const alovaInst = createAlova({
requestAdapter: process.env.NODE_ENV === 'development' ? mockAdapter : axiosRequestAdapter()
});
TypeScript 支持
axios 请求适配器提供了完整的类型适配。method 配置和响应数据的类型将与 axios 的类型完全匹配。这意味着你可以在 TypeScript 项目中享受到类型安全和自动完成的好处。
method 配置
在创建 method 实例时，除了 method 中通用的配置项外，你还可以使用 AxiosRequestConfig 中的配置项，我们已经在类型中去除了和 method 实例通用配置冲突的项。
/**
* axios请求配置参数
* 去掉了与method冲突的属性
*/
export type AlovaAxiosRequestConfig = Omit<
AxiosRequestConfig,
| 'url'
| 'method'
| 'baseURL'
| 'headers'
| 'params'
| 'data'
| 'timeout'
| 'cancelToken'
| 'signal'
| 'onUploadProgress'
| 'onDownloadProgress'
>;
响应数据
axios 的响应数据类型是 AxiosResponse，当你使用 axios 适配器时，也将获得相同格式的响应数据。在实际使用中，我们通常需要在全局处理响应数据，一个简单的实例如下：
const alovaInst = createAlova(
baseURL: 'https://api.alovajs.org',
requestAdapter: axiosRequestAdapter(),
responded(response) {
// response自动被推断为AxiosResponse类型
return response.data;
}
});
错误
当 axios 遇到非 20x 和 30x 的响应状态码时将会抛出错误，为了包含更多信息，axios 将错误实例自定义设计成了一个 AxiosError 实例，而不是普通的 Error 实例，因此当遇到服务端错误或网络错误时都将抛出一个错误，你可以在全局的错误回调中捕获它。
const alovaInst = createAlova(
baseURL: 'https://api.alovajs.org',
requestAdapter: axiosRequestAdapter(),
responded: {
onSuccess(response) {
// response自动被推断为AxiosResponse类型
return response.data;
},
onError(err: AxiosError) {
// err默认为any，你可以强制转换为AxiosError处理
// ...
}
}
});
结语
Alova.JS 以其轻量级、高性能和简洁的 API 赢得了我的青睐。虽然 axios 依然是一个非常强大的库，但 Alova.JS 的出现让我看到了新的可能性。
如果你也在寻找一种新的 HTTP 请求库，或者想要尝试更轻量级、更现代的解决方案，那么 Alova.JS 绝对值得一试。
写在最后
公众号：前端开发爱好者专注分享web前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞👍 或者 ➕关注都是对我最大的支持。
欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。
添加好友备注【进阶学习】拉你进技术交流群
关注公众号后，在首页：
回复 面试题，获取最新大厂面试资料。 回复 简历，获取 3200 套 简历模板。 回复 React 实战，获取 React 最新实战教程。 回复 Vue 实战，获取 Vue 最新实战教程。 回复 ts，获取 TypeScript 精讲课程。 回复 vite，获取 Vite 精讲课程。 回复 uniapp，获取 uniapp 精讲课程。 回复 js 书籍，获取 js 进阶 必看书籍。 回复 Node，获取 Nodejs+koa2 实战教程。 回复 数据结构算法，获取数据结构算法教程。 回复 架构师，获取 架构师学习资源教程。 更多教程资源应有尽有，欢迎 关注获取。
