如何正确处理 JavaScript ES6 中的 Promise 循环？-js教程-PHP中文网

首页

web前端

js教程

如何正确处理 JavaScript ES6 中的 Promise 循环？

Patricia Arquette

Nov 23, 2024 pm 09:06 PM

How to Properly Handle Promise Looping in JavaScript ES6?

JavaScript ES6 Promise 循环

在 JavaScript ES6 中，Promise 提供了一种异步编程的机制。然而，在 for 循环中使用 Promise 是一个挑战，因为循环的同步性质可能会导致意外行为。

异步 Promise 链

确保每个 Promise 都运行只有在解决了它的前身之后，我们才需要实现异步承诺链。这涉及到仅当前一个承诺已解决时才创建每个承诺。

使用 setTimeout() 创建 Promise

为了模拟异步操作，我们经常使用 setTimeout()。然而，为了使链接有效地工作，我们需要一个基于 Promise 的 setTimeout() 版本。这是一个承诺 setTimeout() 的函数：

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

解决方案选项

使用承诺的 setTimeout() 后，可以使用多个选项用于异步承诺链接for 循环：

1。具有初始 Promise 的 for 循环：

此方法使用以立即解析的 Promise 开始的 for 循环。每次迭代都会根据前一次的结果链接一个新的 Promise。

for (let i = 0, p = Promise.resolve(); i < 10; i++) {
    p = p.then(() => delay(Math.random() * 1000)
         .then(() => console.log(i));
}

2.具有初始 Promise 的 Array#reduce：

此解决方案使用 Array#reduce 迭代一系列值，并根据每个步骤的结果创建 Promise。

const delayAndLog = (acc, i) => acc.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));

[...Array(10).keys()].reduce(delayAndLog, Promise.resolve());

3。具有 Promise 解析的递归函数：

此方法涉及一个在 then 回调中调用自身的函数。当下一次迭代准备好时，每次调用都会解析生成的 Promise。

let i = 0;
const loop = () => delay(Math.random() * 1000)
        .then(() => console.log(i++))
        .then(loop);

loop().then(() => {});

4. async/await (ES2017):

ES2017 引入了 async/await，它允许更简洁的异步代码。

async function loop() {
    for (let i = 0; i < 10; i++) {
        await delay(Math.random() * 1000);
        console.log(i);
    }
}

loop();

5. for wait...of (ES2020):

ES2020 引入了await...of 语法，简化了异步迭代。

async function* loop() {
    for (let i of [...Array(10).keys()]) {
        yield await delay(Math.random() * 1000);
    }
}

for await (const i of loop()) {
    console.log(i);
}

这些解决方案确保每个 Promise该循环仅在前一个循环根据需要得到解决后运行。

以上是如何正确处理 JavaScript ES6 中的 Promise 循环？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

PHP教程

1543

276

显示更多

Related knowledge

高级JavaScript范围和上下文 Jul 24, 2025 am 12:42 AM

JavaScript的作用域决定变量可访问范围，分为全局、函数和块级作用域；上下文决定this的指向，依赖函数调用方式。1.作用域包括全局作用域（任何地方可访问）、函数作用域（仅函数内有效）、块级作用域（let和const在{}内有效）。2.执行上下文包含变量对象、作用域链和this的值，this在普通函数指向全局或undefined，在方法调用指向调用对象，在构造函数指向新对象，也可用call/apply/bind显式指定。3.闭包是指函数访问并记住外部作用域变量，常用于封装和缓存，但可能引发

VUE 3组成API与选项API：详细比较 Jul 25, 2025 am 03:46 AM

Vue3中CompositionAPI更适合复杂逻辑和类型推导，OptionsAPI适合简单场景和初学者；1.OptionsAPI按data、methods等选项组织代码，结构清晰但复杂组件易碎片化；2.CompositionAPI用setup集中相关逻辑，利于维护和复用；3.CompositionAPI通过composable函数实现无冲突、可参数化的逻辑复用，优于mixin；4.CompositionAPI对TypeScript支持更好，类型推导更精准；5.两者性能和打包体积无显着差异；6.

掌握JavaScript并发模式：网络工人与Java线程 Jul 25, 2025 am 04:31 AM

JavaScript的WebWorkers和JavaThreads在并发处理上有本质区别。1.JavaScript采用单线程模型，WebWorkers是浏览器提供的独立线程，适合执行不阻塞UI的耗时任务，但不能操作DOM；2.Java从语言层面支持真正的多线程，通过Thread类创建，适用于复杂并发逻辑和服务器端处理；3.WebWorkers使用postMessage()与主线程通信，安全隔离性强；Java线程可共享内存，需注意同步问题；4.WebWorkers更适合前端并行计算，如图像处理，而

用node.js构建CLI工具 Jul 24, 2025 am 03:39 AM

初始化项目并创建package.json；2.创建带shebang的入口脚本index.js；3.在package.json中通过bin字段注册命令；4.使用yargs等库解析命令行参数；5.用npmlink本地测试；6.添加帮助、版本和选项增强体验；7.可选地通过npmpublish发布；8.可选地用yargs实现自动补全；最终通过合理结构和用户体验设计打造实用的CLI工具，完成自动化任务或分发小工具，以完整句⼦结束。

如何在JS中创建和附加元素？ Jul 25, 2025 am 03:56 AM

使用document.createElement()创建新元素；2.通过textContent、classList、setAttribute等方法自定义元素；3.使用appendChild()或更灵活的append()方法将元素添加到DOM中；4.可选地使用insertBefore()、before()等方法控制插入位置；完整流程为创建→自定义→添加，即可动态更新页面内容。

在打字稿中的高级条件类型 Aug 04, 2025 am 06:32 AM

TypeScript的高级条件类型通过TextendsU?X:Y语法实现类型间的逻辑判断，其核心能力体现在分布式条件类型、infer类型推断和复杂类型工具的构建。1.条件类型在裸类型参数上具有分布性，能自动对联合类型拆分处理，如ToArray得到string[]|number[]。2.利用分布性可构建过滤与提取工具：Exclude通过TextendsU?never:T排除类型，Extract通过TextendsU?T:never提取共性，NonNullable过滤null/undefined。3

微观前端体系结构：实施指南 Aug 02, 2025 am 08:01 AM

Microfrontendssolvescalingchallengesinlargeteamsbyenablingindependentdevelopmentanddeployment.1)Chooseanintegrationstrategy:useModuleFederationinWebpack5forruntimeloadingandtrueindependence,build-timeintegrationforsimplesetups,oriframes/webcomponents

JavaScript中的VAR，LET和CONST之间有什么区别？ Aug 02, 2025 pm 01:30 PM

varisfunction-scoped,canbereassigned,hoistedwithundefined,andattachedtotheglobalwindowobject;2.letandconstareblock-scoped,withletallowingreassignmentandconstnotallowingit,thoughconstobjectscanhavemutableproperties;3.letandconstarehoistedbutnotinitial

See all articles

如何正确处理 JavaScript ES6 中的 Promise 循环？

热AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题