umi call 后端 api

野生的正经人

已于 2023-11-07 13:00:56 修改

阅读量1.6k

点赞数

分类专栏： antd 文章标签： reactjs

于 2022-03-28 14:52:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_66886617/article/details/123795365

版权

antd 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用UmiRequest来封装ServiceAPI，并实现参数转换。通过具体示例展示了从UI触发事件到调用ServiceAPI的过程，以及如何生成与维护API代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主思路

使用 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 || {}),
  });
}