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 setting
export 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 - 知乎