概述
在前端开发中，我们经常需要处理异步数据请求的情况。如果我们想要在 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：
npm install --save ember-computed-promise-monitor
使用步骤
ember-computed-promise-monitor 包可以方便地扩展 Ember.js 的 computed 属性以处理 promise 对象。下面是使用 ember-computed-promise-monitor 包的步骤：
步骤 1：导入包
在你的文件中导入 ember-computed-promise-monitor 包。
import computedPromiseMonitor from 'ember-computed-promise-monitor';
步骤 2：使用 computed 属性
使用 computed.Promise 这个新的 computed 属性来扩展 promise 对象。传递一个 promise 函数作为参数并返回一个带有 resolve 和 reject 属性的 promise 对象。
computedProperty: computed.Promise(function() {
return new Promise((resolve, reject) => {
// Promise 处理逻辑，最后别忘记调用 resolve 或 reject
});
}).monitor('computedPropertyStatus'),
// 'computedPropertyStatus' 将在接下来的步骤中进行设置步骤 3：设置 promise 状态状态属性
使用 .monitor() 方法和自定义的状态属性名称来设置 promise 状态属性。.monitor() 方法将在 promise 对象传递解析和拒绝状态的值时更新该状态属性。
computedPropertyStatus: null,
// 这里设置 computedProperty 的状态属性，这个属性将会被更新
...
computedPropertyStatus: computedPromiseMonitor('computedProperty'),步骤 4：在模板中使用
现在，您可以在模板中使用状态属性来显示与 promise 有关的信息。
-- -------------------- ---- -------
----- ----------------------------------
---- ------ ---
-------
----- ------------------------------------
---- -------- ---
-------
----- -----------------------------------
---- ------ ---
-------示例
下面是完整的代码示例，包含上述所有步骤：
-- -------------------- ---- -------
------ ---------------------- ---- ---------------------------------
------ --------- ---- -------------------
------ - -------- - ---- ----------------
------ ------- ------------------
-- -- ---- -------- --
---------- ------------------- -- -
------ -------------------------------------------------------------------
---------------- -- ----------------
------------ -- ---------------------
------------------------------
-- -- ---- ------- ----
---------------- -----
-- ---- --------- ---------------
-------- ------
------ -
--------------------------
-- -- ------------ -------
----------------------
--
-------- -
-- ---- ------ ------ -------
--------------- -
----------------------
-
--
-- -- --- -------- ----- ------------------------
---------------- -----------------------------------
---结论
在本文中，我们使用了 npm 包 ember-computed-promise-monitor 来扩展 ObservedWritable 子类的 computed 属性以处理 promise 对象。使用 ember-computed-promise-monitor 包，我们可以更加简单地管理 promise 对象的状态属性并精确地在界面上展示与异步数据请求有关的内容。我们希望这篇教程可以帮助你更好地管理 promise 对象并迅速适应 promise 对象的使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b365d7
