react中axios配合antd，完成请求数据页面显示加载框

使用场景

一般在管理员端，无需复杂的处理，我们可以直接在每次请求的时候给页面加一个加载框即可。客户端需要复杂处理的时候应该具体在每个页面进行处理。

代码

如下代码中，不仅针对每次请求都添加了加载框，还拦截了响应，配合后端对用户登录状态进行了权限判断，未登录不可访问登录后的页面，登录后不可访问登录和注册页面。
request.tsx
注意：这里文件后缀采用tsx而不是ts的原因是我要在该文件中写HTML：<Spin />

// axios的二次封装
import { message, Spin } from "antd"
import axios from "axios"
import "../assets/styles/request.scss"

const request = axios.create({
  baseURL: "/api",
  timeout: 6000,
})

let reqCount = 0

message.config({
  top: 0,
})
const addReq = () => {
  reqCount++
  if (reqCount === 1) {
    message.destroy()
    message.loading({
      content: "",
      icon: <Spin tip='Loading...' />,
      style: { padding: 0 },
      className: "loading",
    })
  }
}

const delReq = () => {
  reqCount--
  if (reqCount === 0) {
    message.destroy()
  }
}

request.interceptors.request.use((req) => {
  addReq()
  return req
})

// 拦截响应，访问需要登录的页面需要处于登录状态，否则跳转登录页面
request.interceptors.response.use(
  (res) => {
    delReq()
    const { pathname } = window.location
    if (res.data.code === 10002) {
      // 用户未登录
      message.info("用户未登录，跳转登录页面")
      window.location.href = "/login"
    }
    if (
      res.data.code === 0 &&
      (pathname === "/login" || pathname === "/register")
    ) {
      message.info("用户未登录，跳转首页")
      window.location.href = "/main"
    }
    return res.data
  },
  // 后续处理一下
  (err) => {
    delReq()
    return Promise.reject(err)
  }
)
export default request

样式文件
request.scss

.loading {
  .ant-message-notice-content {
    background-color: rgba($color: #000000, $alpha: 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}