alova详解,对比axios,alova的具体使用
参考:alova官方文档
alova是什么
alova 是一个轻量级的请求策略库,简单来说就是可以通过它发送HTTP请求给服务器。
对比axios
- 轻量: alova 很轻量,体积只有 axios 的 30%+。
- 数据缓存: alova 分别提供了 3 种缓存模式来满足不同的缓存场景,分别为内存模式、缓存占位模式、恢复模式。它们是组件无关的,只要请求地址和参数相同都可以命中缓存,除非你关闭了它。响应数据缓存可以极大地提高请求流畅性,降低服务端压力。
- 内存模式: 将响应数据缓存在本地内存中,适用于需要频繁访问且数据变化不频繁的场景。当请求/todo?id=1时,响应数据会被缓存5秒。在这5秒内,再次发起相同的请求将直接从缓存中获取数据,而不需要再次发送请求到服务器。
- 缓存占位模式: 在首次请求时会立即返回一个占位符,然后在后台异步加载数据,适用于需要快速响应用户操作的场景。首次请求/todo?id=1时,会立即返回Loading…作为占位符,同时在后台异步加载数据。如果数据在10秒内再次被请求,将直接从缓存中获取,而不需要再次显示占位符。
- 恢复模式:在数据加载失败时,自动从缓存中恢复数据,适用于需要保证数据一致性的场景。如果请求/todo?id=1失败,alova会自动从缓存中恢复数据。缓存中的数据会被保留30秒,在此期间,即使再次发起请求失败,也可以从缓存中获取数据。
- 请求共享: 请求共享在同时发送多个相同请求时,将会复用同一个请求,它也可以提升应用流畅性和降低服务端压力。
- 并发请求:axios需要使用Promise.all()来同时发出多个请求,而alova则支持使用并发请求。
- 开箱即用的高性能请求策略: alova提供了多个高性能的请求策略模块,可以根据不同请求场景使用不同的模块。
- 数据预拉取: alova支持数据预拉取,提前请求将要使用的数据,提升应用流畅性。
- 请求状态管理: 仅使用 axios 时,通常需要你自行维护请求相关状态,使用 alova 的 use hook 后可以获得自动化的请求状态管理能力。
具体使用
1. 安装
npm install alova --save
2. 创建 alova 实例
- 新建alova文件夹,在此目录下新建index.js/index.ts
import { createAlova } from 'alova';
// v2.0
// import GlobalFetch from 'alova/GlobalFetch';
// v3.0
import adapterFetch from 'alova/fetch';
import VueHook from 'alova/vue'
export const alovaInstance = createAlova({
// 假设我们需要与这个域名的服务器交互
baseURL: 'http://jsonplaceholder.typicode.com',
// 将 alova 库与 Vue.js 框架集成,使得 alova 可以管理 Vue 组件的状态
statesHook: VueHook,
// 请求适配器,这里我们使用fetch请求适配器
requestAdapter: adapterFetch(),
// 设置全局的请求拦截器,与axios相似
beforeRequest() {},
// 响应拦截器,也与axios类似
responded: {
onSuccess: async (response) => {
const json = await response.json()
// 根据后端约定,判断code值抛出对应的问题
if (json.code === 1) {
return json.data
} else {
console.log(json.msg)
throw new Error(json.msg)
}
},
// 抛出错误时,将会进入请求失败拦截器内
onError(error) {
throw new Error(error)
}
}
});
3. 在Vue组件中使用
<template>
<div>
<button @click="handleGet">get</button>
<button @click="handlePost">post</button>
<button @click="handlePut">put</button>
<button @click="handleDelete">delete</button>
</div>
</template>
<script lang="ts" setup>
import { alovaInstance } from '../alova/index';
// 定义异步函数handleGet
async function handleGet() {
const response = await alovaInstance.Get('/posts');
}
// 定义异步函数handlePost
async function handlePost() {
const response = await alovaInstance.Post('/posts',{
title: 'foo',
body: 'bar',
userId: 1,
});
}
// 定义异步函数handlePut
async function handlePut() {
const response = await alovaInstance.Put('/posts/1',{
id: 1,
title: 'foo1',
body: 'bar1',
userId: 1,
});
}
// 定义异步函数handleDelete
async function handleDelete() {
const response = await alovaInstance.Delete('/posts/1');
}
</script>