react封装axios实现全局加载

使用的ui框架是antd，想实现axios请求拦截，实现数据请求前显示加载中，然后改造了一下antd的Spin组件

import axios from 'axios';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { message, Spin, Icon, Alert } from 'antd';
axios.defaults.baseURL = "xxx.com";
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
// 请求前拦截
axios.interceptors.request.use(

    config => {

        var dom = document.createElement('div');
        dom.setAttribute('id', 'loading');
        document.body.appendChild(dom)
        ReactDOM.render(<Spin wrapperClassName='react-loadings' size="large" tip="加载中...">

        </Spin>, dom)
        return config;
    },
    err => {
        message.warning("请求超时");
        return Promise.reject(err);
    }
);

// 返回后拦截
axios.interceptors.response.use(
    data => {
        if (data.status == 200) {
            document.body.removeChild(document.getElementById('loading'))
            let res = data.data;
            //请求状态判断
            if (res.code == 0) {
                return res
            } else {
                return message.warning(res.msg)
            }

        } else {
            return Promise.reject(data);
        }


    },
    err => {

        return Promise.reject(err);
    }
);
Component.prototype.$axios = axios;
export default axios;

在请求前创建了加载的dom元素，请求成功后删除dom元素就实现了加载，css代码只有一点：

#loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-size: 20px;
}

效果如下：