UmiV4 V3版本请求对比（附AntdProV5&UMI4 请求使用）

相关文档：

UMI V3请求文档：官方已不开放v3版本文档，可从antdProV4文档里了解
https://v4-pro.ant.design/docs/server-cn

主要使用的uimi-request插件:https://github.com/umijs/umi-request/blob/master/README_zh-CN.md 中文文档

UMI V4请求文档：https://umijs.org/docs/max/request

主要使用的：Umi Max

---

使用对比

UMI V3

1. request的使用：

   import { request } from 'umi';
   
   export async function apiName() {
     return request('/url');
   }
   

2. request的扩展： (单独写一个reqeust文件)

   import { extend } from 'umi-request';// umi-request提供扩展api
   
   // 通用的错误处理
   const errorHandler = function (err) {
     const { response = {}, data = {} } = err;
     
     // 自定义的贴切业务的请求报错代码
     ……
     
     throw err;
   };	
   
   /** * 配置request请求时的默认参数 */
   const request = extend({
     credentials: 'include', // 默认请求是否带上cookie
     errorHandler,
   });
   
   // 请求拦截
   request.interceptors.request.use(async (url, options) => {
   // 自定义的贴切业务的请求拦截处理
   // 例如请求头个性化处理
   const headers = {
       'Content-Type': 'application/json',
       Accept: 'application/json',
       'Access-Control-Allow-Origin': '*',
     };
     return {
       url,
       options: { ...options,headers },
     };
   });
   
   
   // 响应拦截
   request.interceptors.response.use(async (res) => {
   const response = await res.clone();
   // 做一些特殊状态码判断处理
   ……
   
     return response;
   });
   

---

UMI V4

1. request的使用：

   import { request } from "@umijs/max"
   
   export async function apiName() {
     return request('/url');
   }
   

2. request的扩展： (src根目录下会有一个requestErrorConfig.js文件)

   export const errorConfig: RequestConfig = {
   	// 错误处理： umi@3 的错误处理方案。
   	errorConfig: {
   		// 错误抛出
   		errorThrower: (res) => {},
   		// 错误接收及处理
   		errorHandler: (error: any, opts: any) => {},
   	},
   	// 请求拦截器
   	requestInterceptors: [
   		(url: string, config: RequestOptions) => {
   		// 拦截请求配置，进行个性化处理。
   		const method = config.method || "get"
   		const headers: any = {
   			"Content-Type": "application/json",
   			Accept: "application/json",
   			"Access-Control-Allow-Origin": "*",
   		}
   
   		return {
   				url,
   				options: { ...config, interceptors: true, headers, credentials: "include" },
   			}
   		},
   	],
   		// 响应拦截器
   	responseInterceptors: [
   		(response) => {
   			// 拦截响应数据，进行个性化处理
   			return response
   		},
   	],
   
   }
   

总结：

新版UMI4，不再使用umi-request，也不通过extend来扩展request