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<string, any>) {return request<API.LoginResult>('/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 对象，以便后续处理响应数据。