掌握 JavaScript Promise：Polyfill 和高级技术指南

php中文网 2024-10-15 12:15:37

简介：解锁 javascript 的异步能力

浏览 javascript 的异步功能可能很复杂，但掌握它们可以显着提高您的编码技能和应用程序性能。在本指南中，我们深入研究 javascript promise 的基本工具，特别关注如何为 promise.any、promise.allsettled 和 promise.race 实现 polyfill。这些工具对于希望更有效地处理多个异步操作的 web 开发人员来说非常宝贵。

简化承诺

javascript 中的 promise 就像异步操作未来结果的契约。它们帮助管理需要时间才能完成的任务，例如从服务器获取数据。然而，不同的 promise 提供不同的效用：

立即学习“Java免费学习笔记（深入）”；

promise.any：当任何提供的 promise 解决时解决。
promise.allsettled：在所有 promise 结算后解决，无论它们是履行还是拒绝。
promise.race：一旦其中一个 promise 解决或拒绝，就解决或拒绝。

实现 polyfills 以增强兼容性

有时，较旧的浏览器或环境不支持这些较新的 promise 方法。这就是 polyfill 的用武之地——让我们探索如何实现它们：

promise.any 的 polyfill


   if (!promise.any) {
     promise.any = function (promises) {
       return new promise((resolve, reject) =&gt; {
         promises = array.isarray(promises) ? promises : [];
         let errors = [];
         let resolved = false;

         promises.foreach((promise, index) =&gt; {
           promise.then(result =&gt; {
             if (!resolved) {
               resolved = true;
               resolve(result);
             }
           }).catch(error =&gt; {
             errors[index] = error;
             if (errors.length === promises.length) {
               reject(new aggregateerror(errors, 'all promises were rejected'));
             }
           });
         });
       });
     };
   }

说明：此代码检查 promise.any 是否不可用并定义它。一旦任何承诺得到解决，它就会尝试立即解决。如果所有的 promise 都失败了，它会拒绝并返回 aggregateerror。

polyfill for promise.allsettled


   if (!promise.allsettled) {
     promise.allsettled = function (promises) {
       return promise.all(promises.map(p =&gt; promise.resolve(p).then(value =&gt; ({
         status: 'fulfilled',
         value
       }), reason =&gt; ({
         status: 'rejected',
         reason
       }))));
     };
   }

解释：这个polyfill 将每个promise 转换为一个新的promise，并用一个对象来解析，该对象指示原始promise 是被履行还是被拒绝。

promise.race 的 polyfill


   if (!Promise.race) {
     Promise.race = function (promises) {
       return new Promise((resolve, reject) =&gt; {
         promises.forEach(promise =&gt; {
           Promise.resolve(promise).then(resolve, reject);
         });
       });
     };
   }

说明：一旦输入 promise 之一解析或拒绝，此函数就会解析或拒绝。

最佳实践和使用场景

使用这些填充不仅可以确保您的应用程序在所有浏览器上运行，还可以提高其可靠性。以下是每个 polyfilled promise 方法变得特别有用的场景：