ant design pro v5 之统一错误处理

文档链接：​​​​​​https://umijs.org/docs/max/request#responseinterceptors

运行时配置

在 src/app.ts 中你可以通过配置 request 项，来为你的项目进行统一的个性化的请求设定。

import type { RequestConfig } from 'umi'; export const request: RequestConfig = {  timeout: 1000,  // other axios options you want  errorConfig: {    errorHandler(){    },    errorThrower(){    }  },  requestInterceptors: [],  responseInterceptors: []};

除了 errorConfig, requestInterceptors, responseInterceptors 以外其它配置都直接透传 axios 的 request 配置。在这里配置的规则将应用于所有的 request 和 useRequest 方法.。

下面分别介绍 plugin-request 的运行时配置项。本节的末尾，我们会给出一个完整的运行时配置示例，并且对它的功能进行一个详细的描述。

errorConfig

如果你想要为自己的请求设定统一的错误处理方案，可以在这里进行配置。

其中 errorThrower 接收你后端返回的数据并且需要抛出一个你自己设定的 error， 你可以在这里根据后端的数据进行一定的处理。

我们的 request 会 catch errorThrower 抛出的错误，并且执行你的 errorHandler 方法，该方法接收两个参数，第一个参数是 catch 到的 error，第二个参数则是 request 的 opts。

这里面的 errorHandler 和 errorThrower 需要配套使用。文档的末尾有一个完整的例子。

如果你觉得这种方式进行错误处理过于繁琐，可以直接在拦截器中实现自己的错误处理。

requestInterceptors

为 request 方法添加请求阶段的拦截器。

传入一个数组，每个元素都是一个拦截器，它们会被按顺序依次注册到 axios 实例上。拦截器的写法同 axios request interceptor 一致，它需要接收 request config 作为参数，并且将它返回。

我们建议你使用 RequestConfig，它能帮助你规范地书写你的拦截器。

e.g.

const request: RequestConfig = {  requestInterceptors: [    // 直接写一个 function，作为拦截器    (url, options) =>       {        // do something        return { url, options }       },    // 一个二元组，第一个元素是 request 拦截器，第二个元素是错误处理    [(url, options) => {return { url, options }}, (error) => {return Promise.reject(error)}]    // 数组，省略错误处理    [(url, options) => {return { url, options }}]  ]  }

另外，为了更好的兼容 umi-request，我们允许 umi-request 的拦截器写法，尽管它不能够通过 typescript 的语法检查。

responseInterceptors

为 request 方法添加响应阶段的拦截器。

传入一个数组，每个元素都是一个拦截器，它们会被按顺序依次注册到 axios 实例上。拦截器的写法同 axios response interceptor一致。接收 axios 的 response 作为参数，并且将它返回。

我们建议你使用 RequestConfig，它能帮助你规范地书写你的拦截器。

e.g.

const request: RequestConfig = {  responseInterceptors: [    // 直接写一个 function，作为拦截器    (response) =>       {        // do something        return response       },    // 一个二元组，第一个元素是 request 拦截器，第二个元素是错误处理    [(response) => {return response}, (error) => {return Promise.reject(error)}]    // 数组，省略错误处理    [(response) => {return response}]  ]  }

注意： 我们会按照你的数组顺序依次注册拦截器，但是其执行顺序参考 axios，request 是后添加的在前，response 是后添加的在后

export const request = {
  // 当后端接口不满足该规范的时候你需要通过该配置把后端接口数据转换为该格式，
  // 该配置只是用于错误处理，不会影响最终传递给页面的数据格式
  errorConfig:{
    adaptor: (resData) => {
      return {
        ...resData,
        success: resData.code === 200,
        errorMessage: resData.message,
      };
    },
  },
  // errorHandler:errorHandler,
  // 新增自动添加AccessToken的请求前拦截器
  requestInterceptors: [authHeaderInterceptor],
  responseInterceptors:[demoResponseInterceptors]
};
 
const authHeaderInterceptor = (url, options) => {
  const baseUrl = process.env.NODE_ENV === 'development' ? '/api' : 'https://xxx.xxx.com:9001'; //如果是开发环境走本地代理/API,否则就是正式环境
  const token = localStorage.getItem('userToken');
  const o = options;
  if (history.location.pathname !== loginPath &&　token) { //判断当前是否登陆也，用户有没有登陆
    o.headers = {
      'username': token,
    };
  }
  return {
    url: baseUrl + url,
    options:o
  }
}
//拦截器-响应后拦截
const demoResponseInterceptors = async (response, options) => {
  // if (history.location.pathname !== loginPath) {
  const res = await response.clone().json();
  // console.log(res);
  // console.log(res);
  if(res?.code && res?.code === 200) { //成功之后返回什么
    // const {sacpresult} = res.result;
    const {data} = res;
    // console.log(data);
    return res;
  } else { //失败之后返回什么
    // message.error(res.message)
  }
  return response
};