antd pro基于antd封装一个异步加载时的loading工具类

Ant Design Pro 中已经提供了 PageLoading 组件，可以用于在异步加载时显示 Loading 效果。以下是一个基于 PageLoading 的异步加载 Loading 工具类的示例：

import { PageLoading } from '@ant-design/pro-layout';

class AsyncLoadingUtil {
  static loadingInstance = null;

  static create() {
    if (!AsyncLoadingUtil.loadingInstance) {
      AsyncLoadingUtil.loadingInstance = PageLoading;
    }
    return AsyncLoadingUtil.loadingInstance;
  }

  static show() {
    const LoadingComponent = AsyncLoadingUtil.create();
    AsyncLoadingUtil.loadingInstance = LoadingComponent;
    LoadingComponent.show();
  }

  static hide() {
    const LoadingComponent = AsyncLoadingUtil.create();
    AsyncLoadingUtil.loadingInstance = LoadingComponent;
    LoadingComponent.hide();
  }
}

export default AsyncLoadingUtil;

在上面的代码中，首先定义了一个 AsyncLoadingUtil 类，它包含了三个静态方法：

- `create()` 方法用于创建 PageLoading 组件实例；
- `show()` 方法用于显示 PageLoading 组件；
- `hide()` 方法用于隐藏 PageLoading 组件。

当需要显示异步加载 Loading 时，调用 `AsyncLoadingUtil.show()` 方法即可；当异步操作完成后，调用 `AsyncLoadingUtil.hide()` 方法隐藏 PageLoading 组件。

使用该异步加载 Loading 工具类的示例如下：

import React, { useState } from 'react';
import AsyncLoadingUtil from './AsyncLoadingUtil';

function MyComponent() {
  const [loading, setLoading] = useState(false);

  const handleButtonClick = () => {
    setLoading(true);
    AsyncLoadingUtil.show();
    // 异步操作
    setTimeout(() => {
      setLoading(false);
      AsyncLoadingUtil.hide();
    }, 2000);
  };

  return (
    <div>
      <h1>My Component</h1>
      <button onClick={handleButtonClick}>Fetch Data</button>
      {loading && <PageLoading />}
    </div>
  );
}

export default MyComponent;

在上面的代码中，当用户点击按钮触发异步操作时，设置 `loading` 状态为 `true`，同时调用 `AsyncLoadingUtil.show()` 方法显示 PageLoading 组件。

当异步操作完成后，设置 `loading` 状态为 `false`，同时调用 `AsyncLoadingUtil.hide()` 方法隐藏 PageLoading 组件。最后在 JSX 中根据 `loading` 状态来决定是否渲染 PageLoading 组件。