Antd Pro 关于 request 配置原理的小探究与猜测

tsxCopy
export const request: RequestConfig = {
  errorHandler: (error: ResponseError) => {
    const { messages } = getIntl(getLocale());
    const { response } = error;
    notification.error({
      description: "您的网络发生异常，无法连接服务器",
      message: "网络异常",
    });
    throw error;
  },
};

tsCopy
// request.ts
let requestInstance: AxiosInstance;
let config: RequestConfig;
const getConfig = (): RequestConfig => {
  if (config) return config;
  config = getPluginManager().applyPlugins({
    key: "request",
    type: ApplyPluginsType.modify,
    initialValue: {},
  });
  return config;
};

const getRequestInstance = (): AxiosInstance => {
  if (requestInstance) return requestInstance;
  const config = getConfig();
  requestInstance = axios.create(config);

  config?.requestInterceptors?.forEach((interceptor) => {
    if (interceptor instanceof Array) {
      requestInstance.interceptors.request.use((config) => {
        const { url } = config;
        if (interceptor[0].length === 2) {
          const { url: newUrl, options } = interceptor[0](url, config);
          return { ...options, url: newUrl };
        }
        return interceptor[0](config);
      }, interceptor[1]);
    } else {
      requestInstance.interceptors.request.use((config) => {
        const { url } = config;
        if (interceptor.length === 2) {
          const { url: newUrl, options } = interceptor(url, config);
          return { ...options, url: newUrl };
        }
        return interceptor(config);
      });
    }
  });

  config?.responseInterceptors?.forEach((interceptor) => {
    interceptor instanceof Array
      ? requestInstance.interceptors.response.use(
          interceptor[0],
          interceptor[1]
        )
      : requestInstance.interceptors.response.use(interceptor);
  });

  // 当响应的数据 success 是 false 的时候，抛出 error 以供 errorHandler 处理。
  requestInstance.interceptors.response.use((response) => {
    const { data } = response;
    if (data?.success === false && config?.errorConfig?.errorThrower) {
      config.errorConfig.errorThrower(data);
    }
    return response;
  });
  return requestInstance;
};

const request: IRequest = (url: string, opts: any = { method: "GET" }) => {
  const requestInstance = getRequestInstance();
  const config = getConfig();
  // ...
};

小碎碎念：

1. 查看项目 umi 版本时偶然发现 antd-pro 版本是 5.2.0 -v- 好浪漫的版本号
2. 翻 umi 仓库时看到了仓库里友情提供的 demo，偶然发现有个 demo 的 readme.md 似乎是直接把另个 demo 的 readme.md 复制过来了，但是忘记改描述了，于是我给 umi 提了人生中第一个向大型项目提的 pr。我一边改 readme 一边想着，之前也看到过一个学长在博客里写自己向 Vue 提过一个 pr，当时看到这个的我超震惊，后来偶然跟学长聊起来这个，学长说他只是帮忙改文档的错别字哈哈哈哈
3. 一边看源码一边感慨，到底要写多少代码才能架构出这么庞大的项目，完成这么多功能的集成配置，也不知道组里会怎么教新人上手维护这么大一个项目 qwq
4. 项目今天又要写不完了 QAQ