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的基本用法也都講到了，各位看官也可以去嘗試嘗試，歡迎評論區交流問題。
