概述
在前端开发中，我们经常需要处理异步数据请求的情况。如果我们想要在 UI 上展示一些与这些异步请求相关的信息，如加载指示器或错误信息，那么就需要处理带有 promise 对象的 computed 属性。
Ember.js 是一个流行的前端框架，它提供了方便的 computed 属性来处理数据的计算和展示。然而，当其与 promise 对象一起使用时，Ember.js 就不能自动地表现出异步数据处理相关的信息。这种情况下，可以使用 npm 包 ember-computed-promise-monitor 来简化这个过程。在这篇文章中，我们将探讨如何使用 ember-computed-promise-monitor 包。
安装
在安装 ember-computed-promise-monitor 之前，确保您已经安装了最新版本的 Ember.js 和 npm。
您可以通过以下命令安装 ember-computed-promise-monitor：
--- ------- ------ ------------------------------
使用步骤
ember-computed-promise-monitor 包可以方便地扩展 Ember.js 的 computed 属性以处理 promise 对象。下面是使用 ember-computed-promise-monitor 包的步骤：
步骤 1：导入包
在你的文件中导入 ember-computed-promise-monitor 包。
------ ---------------------- ---- ---------------------------------
步骤 2：使用 computed 属性
使用 computed.Promise 这个新的 computed 属性来扩展 promise 对象。传递一个 promise 函数作为参数并返回一个带有 resolve 和 reject 属性的 promise 对象。
----------------- --------------------------- -
------ --- ----------------- ------- -- -
-- ------- ------------ ------- - ------
---
-------------------------------------
-- ------------------------ -------------步骤 3：设置 promise 状态状态属性
使用 .monitor() 方法和自定义的状态属性名称来设置 promise 状态属性。.monitor() 方法将在 promise 对象传递解析和拒绝状态的值时更新该状态属性。
----------------------- ----- -- ---- ---------------- --------------- --- ----------------------- -------------------------------------------
步骤 4：在模板中使用
现在，您可以在模板中使用状态属性来显示与 promise 有关的信息。
----- ----------------------------------
---- ------ ---
-------
----- ------------------------------------
---- -------- ---
-------
----- -----------------------------------
---- ------ ---
-------示例
下面是完整的代码示例，包含上述所有步骤：
------ ---------------------- ---- ---------------------------------
------ --------- ---- -------------------
------ - -------- - ---- ----------------
------ ------- ------------------
-- -- ---- -------- --
---------- ------------------- -- -
------ -------------------------------------------------------------------
---------------- -- ----------------
------------ -- ---------------------
------------------------------
-- -- ---- ------- ----
---------------- -----
-- ---- --------- ---------------
-------- ------
------ -
--------------------------
-- -- ------------ -------
----------------------
--
-------- -
-- ---- ------ ------ -------
--------------- -
----------------------
-
--
-- -- --- -------- ----- ------------------------
---------------- -----------------------------------
---结论
在本文中，我们使用了 npm 包 ember-computed-promise-monitor 来扩展 ObservedWritable 子类的 computed 属性以处理 promise 对象。使用 ember-computed-promise-monitor 包，我们可以更加简单地管理 promise 对象的状态属性并精确地在界面上展示与异步数据请求有关的内容。我们希望这篇教程可以帮助你更好地管理 promise 对象并迅速适应 promise 对象的使用方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672683660cf7123b365d7