vue+alova入门指南

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的基本用法也都讲到了，各位看官也可以去尝试尝试，欢迎评论区交流问题。