umi request设定middleware

原创已于 2023-11-07 12:58:26 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

于 2022-04-07 21:02:51 首次发布

antd 同时被 2 个专栏收录

7 篇文章

订阅专栏

umi

4 篇文章

订阅专栏

本文档介绍了如何在App.tsx中设置middlewares、requestInterceptors和responseInterceptors，以及errorHandler。通过middlewares可以处理request和response，如记录特殊日志。errorHandler用于处理错误，能区分业务错误并结合statusCode和response。requestInterceptors在请求发送前添加如authkey的信息，而responseInterceptors则在响应返回前进行格式转换或内容补充。同时提供了具体的代码示例展示如何实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主思路

在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: [],
};