介绍
ember-zbj-async-button是一个异步操作按钮组件的npm包。它能够在异步请求结束之前禁用按钮，以避免用户多次点击按钮并造成操作错误。同时，它还能够应对各种异步请求状态并展示相应的UI状态。
安装
引入该npm包非常简单，只需要执行以下命令即可：
npm install ember-zbj-async-button --save
使用
使用前，需要先将组件导入到项目中：
import ZbjAsyncButton from 'ember-zbj-async-button/components/zbj-async-button';
接着，在模版中使用该组件：
-- -------------------- ---- ------- ------------------- ---------------- ------------------- ----------------------- ----------------- ------------------- --------------- ---------- -- ---- ---------------------
我们可以通过传入属性来指定按钮的不同状态：
buttonLabel：按钮文本isLoading：是否正在加载中isSucceeded：是否已完成操作isFailed：是否失败isInitial：是否为初始化状态
同时，也需要传入一个perform函数，该函数为该组件触发的异步操作。在该函数中，通过返回一个Promise对象来标识异步请求完成。
接下来，让我们结合实例来演示该组件的使用。
实例
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ - ------- - ---- --------------------
------ - --- - ---- ---------------
------ ------- ----- ------------ ------- --------- -
-------- --------- - ------
-------- ----------- - ------
-------- -------- - ------
-------- --------- - -----
-------
--------- -
-------------- - -----
-------------- - ------
------ --- ----------------- ------- -- -
------------- -- -
----- --------- - ------------- - ----
-------------- - ------
-- ----------- -
---------------- - -----
----------
- ---- -
------------- - -----
---------
-
-- ------
---
-
-------
------- -
-------------- - ------
---------------- - ------
------------- - ------
-------------- - -----
-
-在这个示例中，通过@tracked来定义了四个状态变量，分别为isLoading、isSucceeded、isFailed和isInitial。接着，在perform函数中，我们模拟了一个2秒的异步请求，根据请求结果设置相应的状态变量。最后，这个Promise对象通过resolve/reject来标识异步请求的结束。
在模版中，我们使用这个组件，并将上面定义的变量传入组件中：
-- -------------------- ---- ------- ----- ----------- ---- ----------------------------- ------- ----- ------------- ---- ------------------------ ------- ----- ---------- ---- ------------------------ ------- ------------------- ---------------- ------------------- ----------------------- ----------------- ------------------- --------------- -------- -- ---- --------------------- ------- ---- ------- ------- --------------------
需要注意的是，模版中我们还添加了一个“重置”按钮，用于重置各个状态变量。
最终，我们可以得到以下效果：
总结
通过这篇文章，我们介绍了如何通过npm包 ember-zbj-async-button来实现一个异步操作按钮组件。同时，我们还演示了如何在Ember.js项目中使用该组件，并提供了一个完整的示例代码。
除了这个组件之外，还有很多优秀的npm包可以帮助我们完成前端项目，这些工具包可以大大提高开发效率，降低代码质量问题，建议我们多关注和使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1da563576b7b1ecce2