在日常项目开发中，由于经常需要发送网络请求，在这期间，页面可能会出现短暂的白屏，因此需要有一个 loading 效果以提升用户体验。

这里我使用了 antd-mobile 5.2.2 中的 SpinLoading 转圈组件，使用了 axios 的请求拦截器和相应拦截器来控制 loading 的展示与隐藏。

1、安装 antd-mobile、axios

npm install antd-mobile axios

2、Loading 组件显示与隐藏方法封装，建立 Loading.js 文件

import React from "react";
import ReactDOM from "react-dom";
import { SpinLoading } from "antd-mobile";
import "./Loading.css";

// 当前正在请求的数量
let requestCount = 0
function LoadingComponent (props) {
    return (
        <div className="loading-box" style={{backgroundColor: props.showBg ? "rgba(0, 0, 0, 0.7)" : "transparent"}}>
            <div className="loading-wrapper">
                <SpinLoading color="primary" />
                <p className="loading-text">{ props.loadingText }</p>
            </div>
        </div>
    )
}

const Loading = {
    show(config = {loadingText: "玩命加载中...", showBg: false}) {
        if (requestCount === 0) {
            const dom = document.createElement('div');
            dom.setAttribute('id', 'loading')
            document.body.appendChild(dom)
            ReactDOM.createRoot(dom).render(<LoadingComponent {...config} />);
        }
        requestCount++
    },
    hide() {
        if (requestCount > 0) {
          requestCount--;
        }
        if (requestCount === 0) {
            document.body.removeChild(document.getElementById('loading'))
        }
    },
}

export default Loading;

Loading.css 代码如下：

#loading {
    width:100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}
.loading-box {
    width:100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading-wrapper {
    padding: 20px 40px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.loading-wrapper .loading-text {
    padding: 0;
    margin: 10px 0 0;
    font-size: 18px;
    color: #000000;
}

3、axios 简单封装

在项目 src 文件夹下建立 networking 文件夹，在该文件夹下建立 index.js 文件，代码如下

import axios from "axios"
import Loading from "../components/Loading/Loading";  // 引入Loading文件

axios.defaults.baseURL = "http://localhost:3002"

axios.interceptors.request.use((config) => {
  Loading.show()
  // 可在此处添加一些通用参数
  return config
}, (error) => {
  setTimeout(() => {
    Loading.hide()
  }, 200)
  return Promise.reject(error)
})

axios.interceptors.response.use((response) => {
  setTimeout(() => {
    Loading.hide()
  }, 200)
  return response
}, (error) => {
  setTimeout(() => {
    Loading.hide()
  }, 200)
  return Promise.reject(error)
})

export default axios

在项目 src 文件夹下的 index.js 文件中引入刚封装的 axios 请求方法

import "./networking"

至此，全局 Loading 组件就可以正常工作了。