乐趣区

关于前端:vuealova入门指南

jiezi

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 的根本用法也都讲到了，各位看官也能够去尝试尝试，欢送评论区交换问题。

退出移动版