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

梦里梦外; 2022-09-14 13:25 71阅读 0赞

[这是官方文档对这个插件的描述][Link 1]

一般情况下我们之前写过的项目都会实例化一个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: [],
    };

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

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

[Link 1]: https://umijs.org/zh-CN/plugins/plugin-request#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F