umi-request 请求统一处理

更详细的 api 文档:

全部代码

/** Request 网络请求工具 更详细的 api 文档: https://github.com/umijs/umi-request */
import {
          
    extend } from umi-request;
import {
          
    notification } from antd;

const codeMessage: Record<number, string> = {
          
   
  200: 服务器成功返回请求的数据。,
  201: 新建或修改数据成功。,
  202: 一个请求已经进入后台排队(异步任务)。,
  204: 删除数据成功。,
  400: 发出的请求有错误,服务器没有进行新建或修改数据的操作。,
  401: 用户没有权限(令牌、用户名、密码错误)。,
  403: 用户得到授权,但是访问是被禁止的。,
  404: 发出的请求针对的是不存在的记录,服务器没有进行操作。,
  406: 请求的格式不可得。,
  410: 请求的资源被永久删除,且不会再得到的。,
  422: 当创建一个对象时,发生一个验证错误。,
  500: 服务器发生错误,请检查服务器。,
  502: 网关错误。,
  503: 服务不可用,服务器暂时过载或维护。,
  504: 网关超时。,
};

/** 异常处理程序 */
const errorHandler = (error: {
          
    response: Response }): Response => {
          
   
  const {
          
    response } = error;
  if (response && response.status) {
          
   
    const errorText = codeMessage[response.status] || response.statusText;
    const {
          
    status, url } = response;

    notification.error({
          
   
      message: `请求错误 ${
            
     status}: ${
            
     url}`,
      description: errorText,
    });
  } else if (!response) {
          
   
    notification.error({
          
   
      description: 您的网络发生异常,无法连接服务器,
      message: 网络异常,
    });
  }
  return response;
};

/** 配置request请求时的默认参数 */
const request = extend({
          
   
  errorHandler, // 默认错误处理
  credentials: include, // 默认请求是否带上cookie
});
// request请求拦截器, 改变url 或 options
request.interceptors.request.use((url, options) => {
          
   
  return {
          
   
    url: `${
            
     url}`,
    options: {
          
    ...options },
  };
});
// request响应拦截器, 统一处理错误信息
request.interceptors.response.use(async (response, options) => {
          
   
  const data = await response.clone().json();
  if (data.code !== 200) {
          
   
    // 界面报错处理
  }

  return response;
});
export default request;

异常处理程序

const errorHandler = (error: {
          
    response: Response }): Response => {
          
   
  const {
          
    response } = error;
  if (response && response.status) {
          
   
    const errorText = codeMessage[response.status] || response.statusText;
    const {
          
    status, url } = response;

    notification.error({
          
   
      message: `请求错误 ${
            
     status}: ${
            
     url}`,
      description: errorText,
    });
  } else if (!response) {
          
   
    notification.error({
          
   
      description: 您的网络发生异常,无法连接服务器,
      message: 网络异常,
    });
  }
  return response;
};

配置request请求时的默认参数

const request = extend({
          
   
  errorHandler, // 默认错误处理
  credentials: include, // 默认请求是否带上cookie
});

request请求拦截器, 改变url 或 options

request.interceptors.request.use((url, options) => {
          
   
  return {
          
   
    url: `${
            
     url}`,
    options: {
          
    ...options },
  };
});

request响应拦截器, 统一处理错误信息

request.interceptors.response.use(async (response, options) => {
          
   
  const data = await response.clone().json();
  if (data.code !== 200) {
          
   
    // 界面报错处理
  }
  return response;
});
经验分享 程序员 微信小程序 职场和发展