umi-request二次封装进行接口的请求

最新推荐文章于 2025-06-23 12:00:02 发布

原创

最新推荐文章于 2025-06-23 12:00:02 发布 · 5k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

使用umi+react+dva+ant-design开发项目时，通过对umi-request进行二次封装方便进行后端接口的请求

一、话不多说先贴完整代码：

@/utils/request.ts

import { extend } from 'umi-request';
import { history } from 'umi';
import { message } from 'antd';
import { stringify } from 'querystring';
import { stringify as qsStringify } from 'qs';

const printErrorInfo = (error: {}) => {  //在控制台打印出对应的错误信息，方便定位问题
  // console.log('error', error);

  const { code, message, status, timestamp, request = {} } = error || {};
  const { url, options } = request;
  const { method, headers, params, data } = options;
  const paramsKeys = Object.keys(params || {});
  const tempParams = paramsKeys && paramsKeys.length ? params : data; // 接口的参数有可能在 params 中也有可能在 data 里

  const errorTagStyle = [
    'color: #ff4d4f',
    'background: #fff2f0',
    'padding: 2px 6px',
    'font-size: 12px',
    'border-radius: 2px',
    'border: 1px solid #ff4d4f',
  ].join(';');

  console.log('%c接口报错信息',