alova? Qu'est-ce que c'est que ça?
Il est normal que vous n'en ayez pas entendu parler. Il s'agit d'une bibliothèque d'implémentation RSM , qui est utilisée pour résoudre des problèmes dans différents scénarios de requête dans le cadre du projet MVVM, et peut également vous aider à gérer l'état du serveur.
C'est comme un arsenal axios, ajoutant des ailes à axios.
Pour plus d'informations sur RSM, veuillez vous référer à RSM : Super Practical Multi-Scenario Request Management Solution
Le site officiel de train est ici
Cet article sert d'introduction de base à vue+alova, et vous pouvez apprendre ce qui suit :
- Comment Alova gère-t-il les requêtes fréquentes, met-il à jour l'état du serveur dans les modules et la recherche floue ?
- Comment alova aide-t-il à gérer l'état du serveur dans le cadre du projet vue
- La manière douce d'utiliser alova
Dans le guide de démarrage suivant, nous prendrons les tâches comme exemple pour expliquer les besoins d'obtenir des listes de tâches pour différentes dates, d'afficher les détails des tâches et de créer, modifier et supprimer des éléments !
Installation d'Alova : npm install alova --save-dev
Initialiser une instance alova
Une alovainstance est le début de l'utilisation et toutes les requêtes doivent partir d'elle. Il est écrit d'une manière similaire axios, et ce qui suit est la méthode de création de l' alovainstance la plus simple.
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;
},
});
liste de tâches - utiliser directement aloval'état géré pour le rendu de l'interface
Notre interface dans cette démo ressemble à ceci.
Nous utilisons useRequestSend Request, qui est la méthode la plus courante pour que les pages obtiennent des données d'initialisation.
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('请求完成，不管成功失败都会调用');
});
Ensuite, nous rendons la todoList dans l'interface de rendu, c'est fait !
<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 edit page - mémoire cache pour les données fréquemment demandées
La page d'édition ressemble à ceci :
Notre scénario ici doit être pris en compte. Les utilisateurs cliquent plusieurs fois sur un élément de tâche à faire pour le voir en quelques secondes. C'est un peu inutile de demander au serveur chaque fois qu'ils entrent. À ce stade, nous pouvons créer une couche de front- mettre fin à la mise en cache pour améliorer la vitesse d'affichage et réduire la pression sur le serveur. .
const todoDetail = id => alovaInstance.Get(`/todo/${
id}`, {
// 设置5分钟的本地内存缓存，刷新即失效
localeCache: 5 * 60 * 1000,
});
const {
loading,
// 响应数据
data: todoDetail,
error,
} = useRequest(todoDetail(params.id));
code de rendu de page
<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>
Code de soumission de données - mettre à jour manuellement les données de la liste de tâches
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);
});
};
Recherche floue d'éléments à faire
La fonction de recherche floue consiste à envoyer en continu des requêtes pendant le processus de saisie des mots-clés.Afin d'améliorer l'expérience utilisateur et de réduire la pression du serveur, nous devons implémenter la stabilisation de la recherche.
Le code d'implémentation est le suivant :
const searchTodo = keyword => alovaInstance.Get(`/todo?keyword=${
keyword}`);
// 通过useWatcher监听keyword变化，变化后自动重新发出请求
const keyword = ref('');
const {
loading,
data,
} = useWatcher(() => searchTodo(keyword.value), [keyword], {
debounce: 500, // 设置500毫秒防抖
});
De cette manière, la fonction de recherche floue avec anti-tremblement est réalisée.
Résumer
Ceci est la fin du guide d'introduction de ce numéro, et l'utilisation de base de vue + alova est également couverte. Les lecteurs peuvent également l'essayer. Bienvenue pour échanger des questions dans la zone de commentaires.