Ant Design Pro 封装网络请求

可以直接在antdPro项目的app.tsx文件中对request进行运行时配置，并且该配置会直接透传到umi-request的全局配置。后续直接从umi中引入request或者useRequest直接使用，可以说是非常方便。文档可查看：umi.js

具体配置代码：

import { history, Link, RequestConfig } from 'umi';
/**
 *
 * 对request进行运行时配置，并且该配置会直接透传到umi-request的全局配置。
 * 后续直接从umi中引入request或者useRequest直接使用，可以说是非常方便。
 */
/** 请求拦截 */
const requestInterceptor = (url: any, options: any): any => {
  const headers = {
    ...options.headers,
    //此处需要修改一下逻辑判断
    Authorization: localStorage.getItem('token') || '1213',
  };
  return {
    url: url,
    options: { ...options, headers: headers },
  };
};
/** 响应拦截 */
const responseInterceptors = (response: any, options: any): any => {
  if (response.status !== 200) {
    switch (response.status) {
      case 401:
        history.push('/login');
        break;
    }
  }
  return response;
};
/** 异常处理程序 */
const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};
const errorHandler = (error: any) => {
  const { response } = error;
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    throw new Error(`请求错误 ${status}: ${url}${errorText}`);
  } else if (!response) {
    throw new Error('您的网络发生异常，无法连接服务器');
  }
  return response;
};

// request运行时配置
export const request: RequestConfig = {
  timeout: 30000, //请求超时时间
  // prefix: process.env.NODE_ENV === "production" ? config.baseurl :'api/', // 统一的请求前缀

  // 自定义端口规范(可以对后端返回的数据格式按照我们的需求进行处理)
  errorConfig: {
    adaptor: (resData) => {
      debugger;
      return {
        ...resData,
      };
    },
  },
  middlewares: [],
  errorHandler: (error) => {
    errorHandler(error);
  }, //请求错误处理
  requestInterceptors: [requestInterceptor], //请求拦截
  responseInterceptors: [responseInterceptors], //响应拦截
};
/**------------------------------------------------------------------配置结束请求拦截------------------------------------------ */

 

这段代码是一个请求配置对象 `request`，其中包含了请求拦截、响应拦截和异常处理的相关逻辑。这些逻辑会在发起请求和接收响应时进行处理。

首先，定义了一个 `requestInterceptor` 函数用于请求拦截。该函数会将存储在本地存储中的令牌添加到请求头的 `token` 字段中，并将修改后的请求头放入 `options` 中返回。

接下来，定义了一个 `responseInterceptors` 函数用于响应拦截。该函数会在响应状态码不为 200 时进行处理。其中，当响应状态码为 401 时，会导航到登录页面并弹出提示信息。

然后，定义了一个异常处理程序 `errorHandler`。该程序会根据响应状态码来判断异常类型，并抛出相应的错误信息。

接下来，定义了一个 `codeMessage` 对象，它存储了一些常见的响应状态码和对应的错误消息。

最后，定义了一个 `request` 对象，包含了一些运行时配置。其中包括了请求超时时间、错误处理函数、请求拦截器和响应拦截器等。

需要注意的是，这段代码可能还需要引入一些外部依赖，比如 `localStorage` 和 `history`。你需要根据你的实际环境和需求进行适配和修改。

总之，这段代码封装了请求拦截、响应拦截和异常处理的逻辑，将它们作为配置项进行统一管理。

 后续使用直接从umi中引入request 或者 useRequest，配置即生效

//后续使用直接从umi中引入request 或者 useRequest，配置即生效
 
import { request } from 'umi';
 
export function login(body: API.LoginParams, options?: Record) {
  return request('/devServer/users/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

 

这段代码是一个登录请求的示例代码。它使用了之前定义的 `request` 对象来发送登录请求。

在 `login` 函数中，通过 `request` 对象发送了一个 POST 请求到 `/devServer/users/login` 接口。请求的主体内容是 `body` 参数，请求头中设置了 `Content-Type` 为 `application/json`。`options` 参数可以传入额外的请求配置，如超时时间等。

`request` 函数返回一个 Promise 对象，该 Promise 对象的泛型参数指定了响应数据的类型为 `API.LoginResult`。

使用这段代码时，你需要根据实际情况修改请求的接口地址和请求体的类型。

总之，这段代码使用了之前定义的 `request` 对象来发送登录请求，并返回一个 Promise 对象，以便后续处理响应数据。