alova？這是個什麼鬼？

你沒聽説過也是很正常，它是一個RSM實現庫，用於解決在MVVM項目下的不同請求場景下的問題，同時也可以幫你管理服務端狀態。

它就像一個axios的武裝庫，為axios插上了翅膀。

詳細瞭解RSM可參考 RSM：超實用的多場景請求管理方案

這篇文章作為vue+alova的基礎入門篇，你可以瞭解到以下內容：

1. alova如何處理頻繁請求、跨模塊更新服務端狀態、模糊搜索
2. alova如何協助管理vue項目下的服務端狀態
3. 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的基本用法也都講到了，各位看官也可以去嘗試嘗試，歡迎評論區交流問題。