umi request设定middleware

主思路

在app.tsx里设定，middlewares, requestInterceptors, responseInterceptors, errorHandler

详情

很简单，在app.tsx里设定。middlewares 会比较复杂，但可以同时处理request和response，比如写入特殊的日志。

errorHandler 就是处理错误的，可以在这里判断业务错误，配合status code和response。

requestInterceptors 是request 拦截器，在request发出前做一些处理，比如加上auth key。

responseInterceptors 是response拦截器，在response交给业务真正处理前做一些处理，比如变换格式，或者补充内容。

import type { RequestConfig } from 'umi';import { getAuthToken } from '@/helpers/utils';const commonProcRequest = (url: string, options: RequestOptionsInit) => {  if (options.headers) {    const authToken = getAuthToken();    options.headers['X-AUTH-TOKEN'] = authToken.token;  }  return {    url: url,    options: {      ...options,    },  };};// request settingexport const request: RequestConfig = {  timeout: 10000,  errorConfig: {},  middlewares: [    async function commonMiddleware(ctx, next) {      // process resp      console.log('A before');      await next();      console.log('A after');    },  ],  requestInterceptors: [commonProcRequest],  responseInterceptors: [],};

参考

官方 @umijs/plugin-request

网络请求 - Ant Design Pro

useRequest: useRequest- 蚂蚁中台标准请求 Hooks - 知乎