本文介绍了如何在umi框架下，通过封装的request函数获取和编辑远程数据。展示了在dva数据仓库model.ts中定义数据类型、处理数据请求和状态管理，以及在首页index.tsx中展示数据和编辑功能。通过UserModal组件实现了表格操作，包括编辑和删除用户记录。
// -----------------------------------使用封装后的request---------------------------------------------
type EditRecordParamsType = {
id: number;
value: FormValues;
};
export async function getRemoteList(): Promise {
return request(’/api/users’);
}
export async function editRecord(params: EditRecordParamsType): Promise {
return request(’/api/edit’, {
method: ‘POST’,
data: params,
});
}
- 提取公用数据类型（data.d.ts中）
/**
- 这个文件是放 公共的 类型接口的
*/
/**
- 封装后台返回的数据
*/
export type SingleUserType ={
id: number,
name?: string,
email?: string,
create_time?: string,
update_time?: string,
status: number
}
/**
- Modal 框的确定按钮的类型
*/
export type FormValues ={
}
- 数据仓库（dva）model.ts中请求并处理数据
import { Effect, Reducer, Subscription } from ‘umi’;
//导入service远端数据请求
import { getRemoteList, editRecord } from ‘./service’
import { SingleUserType } from ‘./data’
/**
- 封装后台返回的数据
*/
export type UserState = {
data: SingleUserType[],
meta: {
total: number,
per_page: number,
page: number
}
}
interface UserModelType {
namespace: ‘usersData’;//这里的命名空间就是展示页面得到数据的键
state: UserState;//封装后台返回的数据
effects: {
最低0.47元/天 解锁文章
扫一扫
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
