JavaScript如何实现异步任务循环顺序执行

今天主机评测网小编给大家分享一下JavaScript如何实现异步任务循环顺序执行的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

需求场景：数组的元素作为异步任务的参数，循环遍历该数组，并执行异步任务。

一、错误的实现

简单的错误实现

//异步任务的参数数组constarr=[1,2,3,4];//异步任务函数functiontask(params,callback){setTimeout(()=>{if(!!callback){callback(params);}},1000);}//循环遍历异步任务的参数数组，并执行异步任务console.time("Testcode");arr.forEach((item,index)=>{task(item,(ret)=>{console.log("ret",ret);console.timeEnd("Testcode");if(index+1<arr.length){console.time("Testcode");}});});

执行结果输出：

由上图可知，所有异步任务的执行是同时开始，并同时结束的，并未按顺序先后执行。

使用 Promise.all 的错误实现

Promise.all() 是一个用于并行执行多个 Promise 的方法，当所有的 Promise 都成功执行后，它返回一个包含所有 Promise 结果的数组，如果其中任何一个 Promise 失败或出错，它将直接跳转到 catch 块中返回一个 rejected 状态的 Promise。

//异步任务的参数数组constarr=[1,2,3,4];//异步任务函数functiontask(params,callback){setTimeout(()=>{if(!!callback){callback(params);}},1000);}consttasks=[];//循环遍历异步任务的参数数组，并执行异步任务console.time("Testcode");arr.forEach((item,index)=>{tasks.push(newPromise((resolve)=>{task(item,(ret)=>{console.log("ret",ret);console.timeEnd("Testcode");if(index+1<arr.length){console.time("Testcode");}resolve(ret);});}));});Promise.all(tasks).then((values)=>{console.log(values);}).catch((error)=>{console.error(error);});

执行结果输出：

由上图可知，循环中的所有异步任务的执行是并行执行的，并未按顺序先后执行。因为 Promise.all() 方法的执行顺序是并行执行的，而不是按照 Promise 在数组中的顺序执行的。

二、正确的实现

//异步任务的参数数组constarr=[1,2,3,4];//异步任务函数functiontask(params,callback){setTimeout(()=>{if(!!callback){callback(params);}},1000);}consttasks=[];console.time("Testcode");arr.forEach((item,index)=>{tasks.push(function(){returnnewPromise((resolve)=>{task(item,(ret)=>{console.log("ret",ret);console.timeEnd("Testcode");if(index+1<arr.length){console.time("Testcode");}resolve(ret);});});});});//定义一个递归函数来依次执行任务functionrunTasks(index){if(index>=tasks.length){//如果所有任务都已经执行完毕，返回一个resolved的PromisereturnPromise.resolve();}//执行当前任务，然后递归执行下一个任务returntasks[index]().then(function(){returnrunTasks(index+1);});}//调用递归函数来执行任务runTasks(0).then(function(){console.log("Alltasksaredone!");}).catch(function(error){console.error(error);});

执行结果输出：

以上就是“JavaScript如何实现异步任务循环顺序执行”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注主机评测网行业资讯频道。

上一篇：Java图片与二进制相互转换怎么实现

下一篇：SpringBoot怎么优雅地实现异步调用

---