在正常工作中，您经常遇到一个场景：
当您单击按钮时，询问一些接口数据，并反复避免用户，我们通常会将加载添加到这些按钮中。此添加功能本身非常简单。只要我们在组件中定义一个变量，但是当我们进行背景管理项目时，可能会有很多这样的按钮。也许在组件中，许多变量都是变量，这些变量都是变量。
接下来，我们在组件上制作一个简单的软件包，以解决这个问题，即耗时和费力。
当我们使用ANTD的对话框时，当我们为我们服务时，此时确定按钮将自动添加效果。执行功能后，弹出窗口将关闭，就像这样：
此时，代码如下：
看到这种效果后，我认为如果可以封装一个组件，则传递了需要执行的功能。根据组件的函数执行，自动添加效果并不是很方便。
在这里，定义了每个人经常使用的几个参数：代码如下：
在我们的自定义组件中，使用上面定义的参数并绑定事件。代码如下：
这部分是整个组件中最重要的部分，也就是说，我们如何判断输入函数是异步函数。当我们传输的功能是异步函数时，组件需要添加加载动画。那么，我们应该如何判断一个函数一个异步函数呢？
我们刚刚介绍的对话框中也有类似的逻辑，因此让我们阅读相关源代码的这一部分，并查看实现方法：
实现源代码，我们知道是否确定函数是否是异步函数，并确定函数是否具有（）方法，那么我们也可以类似地做出判断，代码如下：
在这一点上，我们已经开发了我们的核心组件逻辑。稍后，我们编写一个演示来测试此组件是否满足期望：演示代码如下：
Promise（resolve => {settimeout（（）=> {resolve（）}，2000）}}}}}}}}}}}}}}}}}
````````
我们编写了一个异步功能，以模拟实际业务中的异步请求。现在我们可以看到效果：
与先前的期望一致，因此当我们有类似的需求时，我们可以直接使用该组件，并且可以传递需要执行的异步功能。无需定义变量。
实际上，该组件的代码很少，而且很容易理解。由于我最近制作了很多场景，所以我觉得这个组件仍然非常实用，因此我会与所有人分享。这也是对最重要部分的介绍。我相信，在您学到了它之后，您也可以在满足其实际场景需求的WayComponents中收拾行装。在此中，附加此组件的完整代码：
谢谢阅读？
原始：https：//juejin.cn/post/7099234795720278046