在之前分享的文章中：还在用axios发送请求？来看看alova的高阶用法！，我们详细介绍了关于alova的一些高级特性。今天我们将继续分享alova，从0到1开始，引领大家从创建alova实例，到最基础的几种使用方式。
0. 什么是alova
alova 提供了基础的，与 axios 相似的基础请求能力，你可以配合 axios、fetch 等任何请求库使用，获得
响应缓存、请求共享、跨组件刷新等开箱即用的特性
注意 本文档内容是以alova@2.x为基础进行介绍，目前alova@3.x版本已经发布，如果你打算使用新版本的话，请注意二者之间的API差异
1. 创建alova实例
import { createAlova } from 'alova'
import GlobalFetch from 'alova/GlobalFetch';
import VueHook from 'alova/vue';
const alova = createAlova({
baseURL: 'https://apifoxmock.com/m1/4992867-4651676-default', // 基础路径
requestAdapter: GlobalFetch(), // 请求适配器
statesHook: VueHook, // 状态管理钩子,这里我们以vue为例
localCache: null, // 本地缓存配置
responded: { // 请求响应钩子
// 请求成功的拦截器
onSuccess: async (response: Response) => {
const res = await response.json();
return res
}
}
})
以下是详细的创建参数，大家也可以前往官网查看更加详细的介绍
requestAdapter：请求适配器，常用的fetch，axios都可以在这里进行适配statesHook: 状态管理，这是alova区别于axios的核心，他不仅能完成接口请求，还能帮我们完成相关的状态管理，减少很多重复代码localCache：本地缓存配置，也是alova的核心，我们在之前的文章中已经做过介绍，有兴趣的同学可以自行去了解beforeReuqest：在这里可以做一些公共的请求处理，例如签名，添加公参等responded: 对请求的成功响应和失败响应进行处理，我们这里简单的将response转换为JSON数据就直接返回了
2. 创建method实例
创建好alova实例以后，我们就开基于alova实例的Get/Post/Put等请求方法来创建我们业务具体的接口请求方法，以下是一些示例：
export const getPetById = (id: number) => {
return alova.Get(`/pet/${id}`, {
transformData: (res: getPetByIdReturn) => res.data
})
}
// 根据状态查找宠物列表
export const getPetList = (status = 'available', page: number) => {
return alova.Get<Pet[]>('/pet/findByStatus', {
params: {
status,
page
}
})
}
// 修改宠物信息
export const updatePet = (name: string) => {
return alova.Put('/pet?apifoxResponseId=510404663', { name })
}
alova提供了7种不同的请求方法创建方式：
接下来，我们就开始见识alova的真正实力，看看如何来使用这些method请求方法：
3. useRequest
这是一种最为常见的使用方式，通过useRequest我们不仅能够发送请求，还能非常轻松的活动请求的各种状态与回调：
import { getPetById } from '@/API'
import { useRoute } from 'vue-router'
import { useRequest } from 'alova';
const route = useRoute()
const id = Number(route.params.id)
const { data: pet, loading, send, onSuccess } = useRequest(getPetById(id), {
immediate: true // 自动请求
})
在这个例子中，我们通过useRequest自动发送了一个getPetById的请求。
immediate：自动发送请求，当你将其关闭时，需要手动调用send方法发送请求loading: 请求的loading状态data：请求的数据，注意是响应式的onSuccess：请求成功后的回调，也有onError失败的回调
4. useWatcher
useWatcher可以实现自动监听字段的变化后，自动发送请求，特别适合一些带有搜索、过滤、筛选的列表，只要监听到某个字段的变化，请求就会自动发出，更新数据。
import { Status, getPetList, updatePet, type Pet } from '@/API/index'
import { useWatcher } from 'alova';
// 状态列表
const statusList = [
{
code: Status.Available,
text: '可出售'
},
{
code: Status.Pending,
text: '出售中'
},
{
code: Status.Sold,
text: '已售出'
}
]
const currentStatus = ref(statusList[0].code)
// 分页
const pagination = ref({
page: 1,
pageSize: 5,
itemCount: 100
})
// 自动监听currentStatus与分页变化，重新发起请求
const { data: list, send } = useWatcher(
() => getPetList(currentStatus.value, pagination.value.page),
[currentStatus, pagination],
{
immediate: true,
}
)
5. useFetcher
当你有以下需求时：
- 预加载后续流程中将会使用到的数据并存放在缓存中，让用户不再等待数据加载的过程；
- 便捷地实现跨页面更新数据（类似全局状态），例如修改 todo 列表的某一项后重新拉取最新数据，响应后将刷新界面。
useFetcher就是用于实现以上场景的 hook，通过它获取的响应数据不能直接接收到，但通过它拉取的数据除了会更新缓存外还会更新对应的状态，从而重新渲染视图。
const { fetch } = useFetcher();
onSuccess(() => {
// 当前页数据请求成功后，自动预加载下一页数据
fetch(getPetList(currentStatus.value, pagination.value.page + 1))
})
6. send直接发送
如果你实在是啥hook也不想用，就想简简单单的发送一个请求，然后获得结果，alova也是支持的：
import { updatePet } from '@/API/index'
// 模拟修改名称
const updatePetInfo = async (row: Pet) => {
await updatePet(row.name + '_rename').send()
message.success('修改成功')
send(true)
}
是的，只需要直接调用send方法即可发送请求，跟axios操作类似。
OK，以上就是从alova实例的创建，到method实例的创建，到如何使用这些method的一些基本操作，希望对你有所帮助，减少你的代码量，提高你的代码质量。
另外本篇文章中所使用到的示例代码都已经上传到gitee仓库中，如有所需，欢迎自取。
