主思路
使用 umi request包装的service api,并且做好参数交换。
详情
如果已经有swagger openapi json就可以先生成代码和mock,但是不一定会很理想,可能要做细调,这意味着如果api再进行改动可能就是要人工调整了。如果没有就只能手写了
一般生成在src/services/下,配置在config.ts
openAPI: [
{
requestLibPath: "import { request } from 'umi'",
schemaPath: join(__dirname, 'api.json'),
mock: true,
projectName: 'api',
},
],
调用顺序
UI event/trigger(比如点击,提交之类) -> UI内部func -> service api -> umi request
这中间需要匹配参数,如果比较频繁使用可以考虑定义type,方便使用
// UI event/trigger
<LoginForm
onFinish={async (values) => {
await handleSubmit(values);
}}
>
</LoginForm>
// UI内部 func
import { AuthLogin } from '@/services/api/Auth';
const handleSubmit = async (values: Record<string, any>) => {
try {
const { username, password } = values;
// 登录
const msg = await AuthLogin({ username: username, password: password });
} catch (error) {
const defaultLoginFailureMessage = intl.formatMessage({
id: 'pages.login.failure',
});
message.error(defaultLoginFailureMessage);
}
};
// service api
import { request } from 'umi';
export async function AuthLogin(
body: {
device_id?: string;
password: string;
username: string;
},
options?: { [key: string]: any },
) {
return request<{
id: number;
nickname?: string;
username?: string;
}>('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: body,
...(options || {}),
});
}
参考
umi官方 @umijs/plugin-request
antd pro官方 网络请求 - Ant Design Pro