antd 中 @umijs/plugin-request 如何使用？

数据格式

定义后端数据默认的返回格式如下：

interface ErrorInfoStructure {
  success: boolean; // if request is success
  data?: any; // response data
  errorCode?: string; // code for errorType
  errorMessage?: string; // message display to user 
  showType?: number; // error display type： 0 silent; 1 message.warn; 2 message.error; 4 notification; 9 page
  traceId?: string; // Convenient for back-end Troubleshooting: unique request ID
  host?: string; // onvenient for backend Troubleshooting: host of current access server
}

若您当前的返回数据不符合该规范，则需要进行主动调整。有两处需要调整：

① 编译时配置：（可配置数据字段）
在 config.ts 中配置

export default {
  request: {
    dataField: 'data',
  },
};

② 运行时配置 （可配置是否错误及返回的错误信息字段） 在 src/app.ts 中配置

import { RequestConfig } from 'umi';
export const request: RequestConfig = {
  errorConfig: {
    adaptor: (resData) => {
      return {
        ...resData,
        success: resData.ok,
        errorMessage: resData.message,
      };
    },
  },
};

此外，还有中间层、拦截器，可参考具体的文档

useRequest

使用文档

差异
相比 @umijs/use-request 本身，有如下两点差异：

1. 按照接口请求规范内置了 formatResult: res => res?.data 让你可以更方便的使用数据，当然你也可以自己配置 formatResult 来覆盖内置的这个逻辑。
2. 按照接口错误规范统一了错误处理逻辑。

request

使用文档

差异 相比于 umi-request，一个不同的是 options 扩展了一个配置 skipErrorHandler，该配置为 true 是会跳过默认的错误处理，用于项目中部分特殊的接口。

request('/api/user', {
  params: {
    name: 1,
  },
  skipErrorHandler: true,
})