最近想利用antd-pro（V5）重构一套系统供新系统使用，因为后端接口格式有自己的格式，不能改变。所以网络请求这块只能前端处理了。

最开始我想的是使用之前封装的方法，结果发现不太好处理与antd-pro不一致的字段，通过各种手段完成了网络请求模块后发现必须使用any类型项目才能跑，还有就是破坏了antd-pro的约定，废弃。

这次将技术栈由vue+element转移到react+antd-pro就不能老是强行加入自己的想法，我们能想到的作者早已经想过了，所以一般情况下不需要自己去创造什么，只需要顺着作者的思路去解决问题即可。这样后面有人接手的时候就有轨迹可循了。（ps:虽然我自己搭建框架的时候什么都写了，但是组员还是经常自己去重写一遍，大概就是没有文档的问题吧）

V5版本是ts版本（前面的我没接触过，就好比react我直接从hooks学起），这样虽然文档不全，但是我们可以根据类型推断去看看怎么使用修改代码。

import type { RequestConfig } from 'umi'; //引入request配置问题类型 通过类型去推测怎么使用

export interface RequestConfig extends RequestOptionsInit {
  errorConfig?: {
    errorPage?: string;
    adaptor?: (resData: any, ctx: Context) => ErrorInfoStructure;
  };
  middlewares?: OnionMiddleware[];
  requestInterceptors?: RequestInterceptor[];  //可以看出请求拦截是接收一个数组 将拦截方法传入
  responseInterceptors?: ResponseInterceptor[];
}

//可以看出拦截方法接收两个参数 一个是url 一个是请求配置 这样我们就可以修改请求参数了 响应拦截同理
export type RequestInterceptor = (
  url: string,
  options: RequestOptionsInit
) => {
  url?: string;
  options?: RequestOptionsInit;
};

最终修改的代码如下示例（修改位置在app.tsx文件下）

// 请求拦截
function requestInterceptors(url: string, options: RequestOptionsInit) {
  // 设置代理前缀/api
  const newUrl = `/api${url}`;
  const obj: any = options;
  const { params } = obj;
  // 分页字段修改
  if (params && params.current) {
    params.pageNo = params.current;
    delete params.current;
  }
  return {
    url: newUrl,
    options: obj,
  };
}

// 响应拦截
async function responseInterceptors(response: Response) {
  const res = await response.clone().json();
  console.log(res);

  const { code, result, success } = res;
  // 如果是分页的 字段调整为records
  if (
    code === 0 &&
    Object.prototype.toString.call(result) === '[object Object]' &&
    result.records
  ) {
    result.data = result.records;
    delete result.records;
  }
  return { ...result, code, success };
}

export const request: RequestConfig = {
  errorHandler,
  requestInterceptors: [requestInterceptors],
  responseInterceptors: [responseInterceptors],
};