alova? O que diabos é isso?
É normal que você não tenha ouvido falar, é uma biblioteca de implementação RSM , que é utilizada para resolver problemas em diferentes cenários de requisição do projeto MVVM, e também pode te ajudar a gerenciar o estado do servidor.
É como um arsenal de axios, acrescentando asas a axios.
Para obter mais informações sobre o RSM, consulte RSM: Solução super prática de gerenciamento de solicitações de vários cenários
O site oficial através do trem está aqui
Este artigo serve como uma introdução básica ao vue+alova, e você pode aprender o seguinte:
- Como o Alova lida com solicitações frequentes, atualiza o status do servidor nos módulos e pesquisa difusa
- Como o alova auxilia no gerenciamento do estado do servidor no projeto vue
- A maneira suave de usar alova
No guia de introdução a seguir, usaremos o Todos como exemplo para explicar as necessidades de obtenção de listas de tarefas para datas diferentes, visualização de detalhes de tarefas e criação, edição e exclusão de itens!
Instalação do Alova: npm install alova --save-dev
Inicializar uma instância alova
Uma alovainstância é o início do uso e todas as solicitações precisam começar a partir dela. Está escrito de maneira semelhante axiose o seguinte é o método de criação da alovainstância mais simples.
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;
},
});
lista de tarefas - use diretamente alovao estado gerenciado para renderização de interface
Nossa interface nesta demonstração se parece com isso.
Usamos useRequestSend Request, que é o método mais comum para as páginas obterem dados de inicialização.
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('请求完成，不管成功失败都会调用');
});
Em seguida, renderizamos o todoList na interface de renderização, pronto!
<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>
página de edição de tarefas - cache de memória para dados solicitados com frequência
A página de edição fica assim:
Nosso cenário aqui precisa ser considerado. Os usuários clicam em um item de tarefa várias vezes para visualizá-lo em alguns segundos. É um desperdício solicitar ao servidor toda vez que eles entram. Neste momento, podemos criar uma camada de front- finalize o cache para melhorar a velocidade de exibição e reduzir a pressão no servidor.
const todoDetail = id => alovaInstance.Get(`/todo/${
id}`, {
// 设置5分钟的本地内存缓存，刷新即失效
localeCache: 5 * 60 * 1000,
});
const {
loading,
// 响应数据
data: todoDetail,
error,
} = useRequest(todoDetail(params.id));
código de renderização de página
<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>
Código de envio de dados - atualize manualmente os dados da lista de tarefas
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);
});
};
Pesquisa difusa para itens de tarefas
A função de pesquisa difusa é enviar solicitações continuamente durante o processo de inserção de palavras-chave. Para melhorar a experiência do usuário e reduzir a pressão do servidor, precisamos implementar a estabilização da pesquisa.
O código de implementação é o seguinte:
const searchTodo = keyword => alovaInstance.Get(`/todo?keyword=${
keyword}`);
// 通过useWatcher监听keyword变化，变化后自动重新发出请求
const keyword = ref('');
const {
loading,
data,
} = useWatcher(() => searchTodo(keyword.value), [keyword], {
debounce: 500, // 设置500毫秒防抖
});
Desta forma, a função de busca difusa com antivibração é realizada.
Resumir
Este é o fim do guia introdutório para esta edição, e o uso básico de vue+alova também é abordado. Os leitores também podem experimentá-lo. Bem-vindo à troca de perguntas na área de comentários.