在JS循环中使用async/await的方法

async / await是ES7的重要特性之一，也是目前社区里公认的优秀异步解决方案。目前，async / await这个特性已经是stage 3的建议，可以看看TC39的进度，本篇文章将分享在JS循环中使用async/await的方法.

在开发maty.js时，遇到一个数组任务，数组项是内部异步执行的函数，期望是同步依次执行每项函数，每项函数执行完本身的异步任务后，继续下一项。

刚开始单纯使用map来循环执行，并且await每项函数。如下所示：

starters.map(async (fn, i)=> {
 console.log('++++++++++: ', i)
 await fn(ctx);
});

结果是依次先输出了索引i，而不是阻塞每次循环，按期望执行。

搬出Google大法，可以看出对在 for…of 循环语法中使用await是有效的。

for (const fn of starters) {
 await fn(ctx);
}

同时文章中指出使用Promise.all，是无法解决当前问题的，因为all方法是并行运行的。很奇怪为什么没有串行执行的原生方法。

总结

以上所述是小编给大家介绍的在JS循环中使用async/await的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了.虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段. 直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据 老朋友 Ajax 传统的写法,无需解释 // 获取产品数据 ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON

  • async/await与promise（nodejs中的异步操作问题）

    举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa

  • Js中async/await的执行顺序详解

    前言 虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上

  • NodeJs通过async/await处理异步的方法

    场景 远古时代 我们在编写express后台,经常要有许多异步IO的处理.在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数.我们来模拟一个Mongo数据库的操作,感受一下. mongoDb.open(function(err, db){ if(!err){ db.collection("users", function(err, collection){ if(!err){ let person = {name: "yika&q

  • 深入理解JavaScript的async/await

    async 和 await 在干什么 任意一个名称都是有意义的,先从字面意思来理解.async 是"异步"的简写,而 await 的意思是等待.所以应该很好理解 async 用于申明一个 function 是异步的,而 await 等待某个操作完成. 那么async/await到底是干嘛的呢?我们先来简单介绍一下. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上.(对promi

  • 详解Node.js中的Async和Await函数

    在本文中,你将学习如何使用Node.js中的async函数(async/await)来简化callback或Promise. 异步语言结构在其他语言中已经存在了,像c#的async/await.Kotlin的coroutines.go的goroutines,随着Node.js 8的发布,期待已久的async函数也在其中默认实现了. Node中的async函数是什么? 当函数声明为一个Async函数它会返回一个 AsyncFunction 对象,它们类似于 Generator 因为执可以被暂停.唯

  • 在JS循环中使用async/await的方法

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享在JS循环中使用async/await的方法. 在开发maty.js时,遇到一个数组任务,数组项是内部异步执行的函数,期望是同步依次执行每项函数,每项函数执行完本身的异步任务后,继续下一项. 刚开始单纯使用map来循环执行,并且await每项函数.如下所示: starters.map(async (fn,

  • 微信小程序中使用 async/await的方法实例分析

    本文实例讲述了微信小程序中使用 async await的方法.分享给大家供大家参考,具体如下: 微信小程序中有大量接口是异步调用,比如 wx.login().wx.request().wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了 success().fail() 和 complete() 作为异步调用不同情况下的回调. 但是,以回调的方式来写程序,真的很伤,如果有一个过程需要依次干这些事情: wx.getStorage() 获取缓存数据,检查登录状态 wx.getSe

  • JS循环中正确使用async、await的姿势分享

    JS循环中正确使用async、await的姿势分享

    目录 概览(循环方式 - 常用) 声明遍历的数组和异步方法 for 循环中使用 map 中使用 forEach 中使用 filter 中使用 附使用小结 总结 概览(循环方式 - 常用) for map forEach filter 声明遍历的数组和异步方法 声明一个数组:️ const skills = ['js', 'vue', 'node', 'react'] 再声明一个promise的异步代码: ️ function getSkillPromise (value) { return ne

  • 在 Node.js 中使用 async 函数的方法

    借助于新版 V8 引擎,Node.js 从 7.6 开始支持 async 函数特性.今年 10 月 31 日,Node.js 8 也开始成为新的长期支持版本,因此你完全可以放心大胆地在你的代码中使用 async 函数了.在这边文章里,我会简要地介绍一下什么是 async 函数,以及它会如何改变我们编写 Node.js 应用的方式. 1 什么是 async 函数 利用 async 函数,你可以把基于 Promise 的异步代码写得就像同步代码一样.一旦你使用 async 关键字来定义了一个函数,那

  • 三分钟学会用ES7中的Async/Await进行异步编程

    本文介绍了三分钟学会用ES7中的Async/Await进行异步编程,分享给大家,具体如下: Async/Await基本规则 async 表示这是一个async函数,await只能用在这个函数里面. await 表示在这里等待promise返回结果了,再继续执行. await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了-) 一个Async/Await例子 Async/Await应该是目前最简单的异步方案了,首先来看个例子. 这里我们要实现

  • ASP.Net中的async+await异步编程的实现

    在.NET Framework4.5框架.C#5.0语法中,通过async和await两个关键字,引入了一种新的基于任务的异步编程模型(TAP).在这种方式下,可以通过类似同步方式编写异步代码,极大简化了异步编程模型. 用法: public async Task<int> GetDotNetCountAsync() { // Suspends GetDotNetCount() to allow the caller (the web server) // to accept another r

  • React/Redux应用使用Async/Await的方法

    Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Promise ,最终会进化为 Async/Await .虽然这个特性尚未正式发布,但是利用babel polyfill我们已经可以在应用中使用它了. 现在假设一个简单的React/Redux应用,我将引入 Async/Await 到其代码. Actions 此例子中有一个创建新文章的 Action ,传统方法是利用 Prom

  • java集合类arraylist循环中删除特定元素的方法

    在项目开发中,我们可能往往需要动态的删除ArrayList中的一些元素. 一种错误的方式: <pre name="code" class="java">for(int i = 0 , len= list.size();i<len;++i){ if(list.get(i)==XXX){ list.remove(i); } } 上面这种方式会抛出如下异常: Exception in thread "main" java.lang.I

  • Python在for循环中更改list值的方法【推荐】

    一.在for循环中直接更改列表中元素的值不会起作用: 如: l = list(range(10)[::2]) print (l) for n in l: n = 0 print (l) 运行结果: [0, 2, 4, 6, 8] [0, 2, 4, 6, 8] l中的元素并没有被修改 二.在for循环中更改list值的方法: 1.使用range l = list(range(10)[::2]) print (l) for i in range(len(l)): l[i] = 0 print (l

  • Node.js 中使用 async 函数的方法

    借助于新版 V8 引擎,Node.js 从 7.6 开始支持 async 函数特性.今年 10 月 31 日,Node.js 8 也开始成为新的长期支持版本,因此你完全可以放心大胆地在你的代码中使用 async 函数了.在这边文章里,我会简要地介绍一下什么是 async 函数,以及它会如何改变我们编写 Node.js 应用的方式. 1 什么是 async 函数 利用 async 函数,你可以把基于 Promise 的异步代码写得就像同步代码一样.一旦你使用 async 关键字来定义了一个函数,那

随机推荐