跳到主要内容
版本:v3

步骤1-以保守请求实现功能

以 Todo 管理为示例,来实现 Todo 在无感交互模式下的创建、编辑、删除等功能,在接下来的章节中将提供请求相关的关键代码。

使用 useSQRequest 来替代 alova 提供的 useRequest,接下来先以最常见的保守请求模式来实现,再一步一步处理无感交互模式的兼容性。

创建 alova 实例和相关 method

api.js
import { createAlova } from 'alova';

export const alovaInst = createAlova({
/*...*/
});

/** 加载todo列表 */
const todoList = () => alovaInst.Get('/todo');

/** 加载todo详情 */
const todoDetail = id =>
alovaInst.Get('/todo', {
params: { id }
});

/** 创建、编辑todo项 */
const createOrEditTodo = (data, id) =>
alovaInst.Post('/todo', {
data,
id
});

/** 删除todo项 */
const deleteTodo = id => alovaInst.Delete('/todo', { id });

启动静默工厂

main.js
import { bootSilentFactory } from 'alova/client';
import { alovaInst } from './api.js';

bootSilentFactory({
alova: alovaInst
});

加载 Todo 列表

以最简单的方式加载并展示页面数据

import { useSQRequest } from 'alova/client';
import { todoList } from './api.js';
const { data, loading, error } = useSQRequest(todoList, {
initialData: []
});

进入 Todo 创建/编辑页

创建 todo 项时,id 为空,不发送详情获取请求,编辑 todo 项时,id 有值,将获取详情数据。

import { useSQRequest } from 'alova/client';
import { todoDetail } from './api.js';

const id = /* todo id */;
const { loading, data } = useSQRequest(() => todoDetail(id), {
initialData: {
title: '',
time: new Date()
},
immediate: !!id
});

创建/编辑 Todo 项

通过提交事件触发请求,提交成功后调用 fetch 重新拉取最新的列表数据,界面将自动展示最新数据。

import { useFetcher } from 'alova';
import { useSQRequest } from 'alova/client';
import { createOrEditTodo, todoList } from './api.js';

const id = /* todo id */;
const { loading, data, send, onSuccess } = useSQRequest(createOrEditTodo, {
immediate: false,
});

const { fetch } = useFetcher();
onSuccess(() => {
// 重新拉取列表数据
fetch(todoList);
})

// 提交事件回调函数
const handleSubmit = newData => {
send(newData, id);
};

删除 Todo 项

通过 id 删除对应的 todo 项

import { useSQRequest } from 'alova/client';
import { deleteTodo, todoList } from './api.js';

const { loading, data, send, onSuccess } = useSQRequest(deleteTodo, {
immediate: false
});

const { fetch } = useFetcher();
onSuccess(() => {
// 重新拉取列表数据
fetch(todoList);
});

// 事件回调触发删除请求
const handleDelete = deletingId => {
send(deletingId);
};

至此,一个简单的 Todo 列表管理的相关请求功能就完成了,接下来我们将开始对它进行改造,来兼容无感交互模式。