ECMAScript 9(也称为 ES2018)是 JavaScript 编程语言的一个版本,并于 2018 年 6 月发布。它引入了许多新特性和语言功能,其中包含更实用的异步编程工具和 Promises 扩展。在这篇文章中,我们将了解 ES9 中的新特性,如何利用这些特性来扩展 Promises,并且我们将深入到其中一个问题:防止浏览器窗口崩溃。
Promises 扩展
Promises 提供了一种用于异步编程的精简方法,以避免经典的回调地狱。但是,很多开发人员发现 Promises 写法受限于其原始实现。ES9 中,新增了一些 Promise 的扩展方法,这些方法让 Promise 变得更加易于使用,并且可以减少代码冗余。
Promise.finally()
finally()
方法可以用于添加一个“无论是成功还是失败,都要运行”的处理程序。它接收一个函数并返回该 Promise 对象本身。
-- -------------------- ---- ------- ------------------------ --------- -- - ----------------- -- ----- ----- --- -------------- -- ---------- -- - -------------------- ----- ------ ---------- -- ----------- -- - ------------------------------ -- --------- -- -------------------- ----- -- ----- --------
在例子中,当 Promise 响应时,我们抛出了一个错误并捕获了它。然后,我们返回了一个替换的、可处理的结果,并使用 finally()
方法定义一个必须要运行的函数。在 finally()
内部,可以解析 Promise,并更改其状态。最后,我们使用 then()
方法获取 Promise 的结果。
Promise.allSettled()
allSettled()
方法可以用于在所有 Promise 解析时获取它们的结果。即使某些 Promise 触发错误,也可以返回有关所有 Promise 状态的信息。它期望一个包含 Promise 实例的可迭代的对象,并返回一个 Promise 对象。
-- -------------------- ---- ------- ----- -------- - - ------------------- ---- ------------------- ---- ------------------ ---- ------------------ --- -- ---------------------------- ------------- -- ----------------------
在上面的示例中,我们创建了一个包含两个成功 Promise 和两个失败 Promise 的 promises 数组。然后,我们使用 allSettled()
方法检索关于所有 Promise 状态的信息。
输出结果:
[ {status: "fulfilled", value: "成功 1"}, {status: "fulfilled", value: "成功 2"}, {status: "rejected", reason: "错误 1"}, {status: "rejected", reason: "错误 2"} ]
allSettled()
方法返回的结果数组包含有关每个 Promise 的信息。我们可以通过属性(如 status
)来确定每个 Promise 状态。属性 value
或 reason
包含了关于每个 Promise 的信息。
防止浏览器窗口崩溃
JavaScript 语言是单线程的,这意味着在同一时刻我们不能执行太多的工作。如果我们一次性执行太多的任务,就可能导致浏览器的窗口崩溃。对于这种情况,我们可以使用异步方法和异步队列来防止浏览器窗口崩溃。
-- -------------------- ---- ------- ----- --------- - ----- -- -- - -- ---- - ----- ---------- - ----- ----- --- -- - --- ------ - --- --- ---- - - -- - - ----------- ---- - ----------------- ------------ - ------ ------- -- ----- ------------- - ----- ----- --- - ------------ ------- ------------- -- --- -- -- --- ------ -- -- - ----- ----------- - --- ----- ---------- - ----------------------- - ------------- --- ------- - --- --- ---- - - -- - - ----------- ---- - ----- ---------- - - - ------------ ----- -------- - ----------------------- -- - -- - ------------- ----- ----- - --------------------- ---------- ----- ----------- - ----- ----------------- ----------- ------- - ---------------------------- -- ---- -------- ------------ ------------------------------------ ---------------- ------ - --------------------- -----
在上面的示例中,我们创建了一个包含 5,000 个任务的 ids 数组,并使用 asyncQueue()
方法和 asyncTask()
方法来模拟为每个任务执行任务。asyncQueue()
方法并行处理数组中的数值,它将相邻的标识符分组到子队列中,并等待每个子队列中的任务执行后一并进行处理。 对于 5,000 个任务,我们定义了队列长度为 20,并使用 console.log()
将 Promise 进度发布到控制台。
结论
在这篇文章中,我们介绍了 ECMAScript 9 中的新特性,这些特性包括 Promise 的扩展和防止浏览器窗口崩溃的技巧。这些技术能够帮助开发人员创建更好的异步编程体验,并减少类似浏览器崩溃这样的错误出现的可能性。无论是使用 Promises 还是 async/await 方法来处理异步任务,还是使用异步队列来避免更新太多的元素并强制浏览器渲染大量数据,我们都要注意不要超过浏览器单线程执行操作。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/670b6184d91dce0dc889f702