alova？这是个什么鬼？
你没听说过也是很失常，它是一个RSM实现库，用于解决在MVVM我的项目下的不同申请场景下的问题，同时也能够帮你治理服务端状态。
它就像一个axios的武装库，为axios插上了翅膀。
具体理解RSM可参考 RSM：超实用的多场景申请治理计划
这篇文章作为vue+alova的根底入门篇，你能够理解到以下内容：
- alova如何解决频繁申请、跨模块更新服务端状态、含糊搜寻
- alova如何帮助治理vue我的项目下的服务端状态
- alova顺滑的应用形式
在接下来的入门指南中，咱们将以待办事项（todo）为例，围绕着获取不同日期的待办事项列表、查看todo详情，以及创立、编辑、删除事项等需要进行解说！
alova装置：npm install alova --save-dev
初始化一个alova实例
一个alova实例是应用的开始，所有的申请都须要从它开始。它的写法相似axios，以下是一个最简略的alova实例的创立办法。
import { createAlova } from 'alova';import GlobalFetch from 'alova/GlobalFetch';import VueHook from 'alova/vue';const alovaInstance = createAlova({ // 假如咱们须要与这个域名的服务器交互 baseURL: 'https://api.todo.com', // 在vue我的项目下引入VueHook，它能够帮咱们用vue的ref函数创立申请相干的，能够被alova治理的状态 statesHook: VueHook, // 申请适配器，这里咱们应用fetch申请适配器 requestAdapter: GlobalFetch(), // 设置全局的申请拦截器，与axios类似 beforeRequest(config) { // 假如咱们须要增加token到申请头 config.headers.token = 'token'; }, // 响应拦截器，也与axios相似 async responsed(response, config) => { const json = await response.json(); if (json.code !== 200) { // 这边抛出谬误时，将会进入申请失败拦截器内 throw new Error(json.message); } return json.data; },});todo列表 - 间接应用alova治理的状态进行界面渲染
此demo中咱们的界面长这样。
咱们应用useRequest发送申请，它是页面获取初始化数据时最罕用的办法。
const todoListGetter = alovaInstance.Get('/todo/list');const { // loading是加载状态值，当加载时它的值为true，完结后自动更新为false // 它是一个Ref类型的值，你能够通过loading.value拜访它，或间接绑定到界面中 loading, // 响应数据 data: todoList, // 申请谬误对象，申请谬误时有值，否则为undefined error, // 胜利回调绑定 onSuccess, // 失败回调绑定 onError, // 实现回调绑定 onComplete, // 间接将Method对象传入即可发送申请} = useRequest(todoListGetter, { // 初始data数据 initialData: [],});// ###### 回调设置onSuccess(todoListRaw => { console.log('申请胜利，响应数据为:', todoListRaw);});onError(error => { console.log('申请失败，错误信息为:', error);});onComplete(() => { console.log('申请实现，不论成功失败都会调用');});接下来，咱们把todoList渲染到渲染界面上，实现！
<div v-if="loading">Loading...</div><div v-else-if="error" class="error">{{ error.message }}</div><template v-else> <div v-for="todo in todoList"> <div class="todo-title">{{ todo.title }}</div> <div class="todo-time"> <span class="time">{{ todo.startTime }}</span> to <span class="time">{{ todo.endTime }}</span> </div> </div></template>todo编辑页 - 将频繁申请的数据做内存缓存
编辑页是这样的：
这里咱们的场景须要思考，用户在数秒内屡次点击某个todo项进行查看，每次进入都申请服务器显得有点节约，此时咱们能够做一层前端缓存，来进步展现速度，缩小服务端压力。
const todoDetail = id => alovaInstance.Get(`/todo/${id}`, { // 设置5分钟的本地内存缓存，刷新即生效 localeCache: 5 * 60 * 1000,});const { loading, // 响应数据 data: todoDetail, error,} = useRequest(todoDetail(params.id));页面渲染代码
<div v-if="loading">loading...</div><div v-else> <input v-model="todoDetail.title" /> <input v-model="todoDetail.date" /> <input v-model="todoDetail.startTime" /> <input v-model="todoDetail.endTime" /> <!-- ... --> <button @click="handleAddTodo">提交数据</button></div>数据提交代码 - 手动更新todo列表数据
const createTodoPoster = newTodo => alova.Post('/todo', newTodo);const { loading, data, error, // 手动发送器申请的函数，调用后发送申请 send: submitTodo,} = useRequest(() => createTodoPoster(todoDetail.value), { // 当immediate为false时，初始化时不再发出请求 immediate: false});// 手动发送申请const handleAddTodo = () => { submitTodo() .then(result => { // 更新列表数据，获取todo列表状态，返回更新后的数据 updateState(todoDetail(params.id), todoListData => { const index = todoListData.findIndex(({ id }) => id === params.id); todoListData[index] = todoDetail.value; return todoListData; }); }) .catch(error => { console.log('新增todo项失败，错误信息为:', error); });};含糊搜寻todo项
含糊搜寻性能就是，在输出关键字过程中一直发出请求，为了晋升用户体验，减小服务端压力，咱们要实现搜寻防抖。
实现代码如下：
const searchTodo = keyword => alovaInstance.Get(`/todo?keyword=${keyword}`);// 通过useWatcher监听keyword变动，变动后主动从新发出请求const keyword = ref('');const { loading, data,} = useWatcher(() => searchTodo(keyword.value), [keyword], { debounce: 500, // 设置500毫秒防抖});这样就实现了带防抖的含糊搜寻性能。
总结
这期的入门指南就讲到这了，vue+alova的根本用法也都讲到了，各位看官也能够去尝试尝试，欢送评论区交换问题。