umi call 后端 api

主思路

使用 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  {     await handleSubmit(values);   }} > // UI内部 funcimport { AuthLogin } from '@/services/api/Auth';    const handleSubmit = async (values: Record) => {    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 apiimport { request } from 'umi';export async function AuthLogin(  body: {    device_id?: string;    password: string;    username: string;  },  options?: { [key: string]: any },) {  return request('/login', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    data: body,    ...(options || {}),  });}

参考

umi官方 @umijs/plugin-request

antd pro官方 网络请求 - Ant Design Pro