umi使用plugin-request进行请求的全局配置

这是官方文档对这个插件的描述

一般情况下我们之前写过的项目都会实例化一个request对象，进行配置，比如配置响应拦截和请求拦截 ，会在utils文件夹下新建一个request.js文件来实例化出一个request对象，配置错误处理以及拦截器等等，然后把这个实例化出来的对象引入每个页面的service文件里，进行接口请求。

但是今天说说umi里面对request进行全局配置的方法，在app.jsx文件里面写入，错误提示是支持多语言环境的，所以先写好一个json文件：

const httpErrorMessage = {
  'en-US': {
    200: 'The server successfully returned the requested data.',
    201: 'Data is created or modified successfully. Procedure',
    202: 'A request has been queued in the background (asynchronous task).',
    204: 'Succeeded in deleting data. Procedure',
    400: 'The server did not create or modify data.',
    401: 'User does not have permission (wrong token, username, password).',
    403: 'The user is authorized, but access is prohibited.',
    404: 'The request was made for a nonexistent record, and the server did not act on it.',
    406: 'The requested format is not available.',
    410: 'The requested resource is permanently deleted and will not be retrieved.',
    422: 'A validation error occurred while creating an object.',
    500: 'An error occurred on the server. Check the server.',
    502: 'Gateway error.',
    503: 'The service is unavailable, the server is temporarily overloaded or maintained.',
    504: 'The gateway timed out.',
  },
  'zh-CN': {
    200: '服务器成功返回请求的数据。',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队（异步任务）。',
    204: '删除数据成功。',
    400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
    401: '用户没有权限（令牌、用户名、密码错误）。',
    403: '用户得到授权，但是访问是被禁止的。',
    404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
    406: '请求的格式不可得。',
    410: '请求的资源被永久删除，且不会再得到的。',
    422: '当创建一个对象时，发生一个验证错误。',
    500: '服务器发生错误，请检查服务器。',
    502: '网关错误。',
    503: '服务不可用，服务器暂时过载或维护。',
    504: '网关超时。',
  }
}

　　在官方文档说明里面，是支持配置这几项的，该配置返回一个对象。除了 errorConfig 和 middlewares 以外其它配置都是直接透传 umi-request 的全局配置。：

export const request = {
  timeout: 1000,
  errorConfig: {},
  middlewares: [],
  requestInterceptors: [],
  responseInterceptors: [],
};

　　我使用了错误处理和拦截器：

const lang = getLocale() // zh-CN | en-US
// 服务器请求错误状态处理
const errorHandler = (error) => {
  const { response } = error;
  if (response && response.status) {
    const errorText = httpErrorMessage[lang][response.status] || response.statusText;
    message.error({
      content: errorText,
    });
  } 
  return response;
};
export const request = {
  errorHandler,
  requestInterceptors: [    // 请求拦截器，接收数组，可设置多个拦截器
    (_, options) => {
      return {
        options: {
          ...options,
          headers: {
            ...(options?.headers ?? {}),
            Authorization: `bearer ${initialState?.auth?.[0]?.id_token}`,    // 这里获取自己的token携带在请求头上
          },
        },
      };
    },
  ],
  responseInterceptors: [  // 相应拦截器，也接受数组
    async (response) => {
      if (response) {
        if (response.status === 401) {   // token过期的时候自动刷新获取新的token自动登录，当然这是根据自己页面的需求决定，大多都是token过期跳转登录页面，重新登陆
          
        }
        if (response.status === 200) {  // 后端规定了一些自定义返回的errorCode码，返回后端的自定义提示信息
          const data = await response.clone().json();
          if (data && data.messageCode) {
            const errorText = codeErrorMessage[lang][data.messageCode] || codeErrorMessage[lang][10000];          //  codeErrorMessage支持多语言环境的json文件，和httpErrorMessage 一样写法
            message.error({
              content: errorText,
            })
          }
        }
      } else {
        message.error({
          content: lang == 'zh-CN' ? '您的网络发生异常，无法连接服务器' : 'Your network is abnormal and you cannot connect to the server',
        })
      }
      return response;
    },
  ],
};

　　

就酱，配置情况都是根据自己项目需求，就完成了全局配置
有问题看文档，多看文档~~

版权声明：本文为CSDN博主「慢半拍、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/huanhuan03/article/details/120652598