详解如何构建Promise队列实现异步函数顺序执行


Posted in Javascript onOctober 23, 2018

场景

有a、b、c三个异步任务,要求必须先执行a,再执行b,最后执行c

且下一次任务必须要拿到上一次任务执行的结果,才能做操作

思路

我们需要实现一个队列,将这些异步函数添加进队列并且管理它们的执行,队列具有First In First Out的特性,也就是先添加进去的会被先执行,接着才会执行下一个(注意跟栈作区别)

大家也可以类比一下jQuery的animate方法,添加多个动画也会按顺序执行

解决

模拟3个异步函数

// 异步函数a
var a = function () {
 return new Promise(function (resolve, reject) {
  setTimeout(function () {
   resolve('a')
  }, 1000)
 })
}

// 异步函数b
var b = function (data) {
 return new Promise(function (resolve, reject) {
  resolve(data + 'b')
 })
}

// 异步函数c
var c = function (data) {
 return new Promise(function (resolve, reject) {
  setTimeout(function () {
   resolve(data + 'c')
  }, 500)
 })
}

解决方法一(使用then链式操作)

特点:可以满足需求,但是书写比较繁琐

代码

//链式调用
a()
 .then(function (data) {
  return b(data)
 })
 .then(function (data) {
  return c(data)
 })
 .then(function (data) {
  console.log(data)// abc
 })

方法二(构建队列)

特点:封装方法,可移植到别处使用

代码

// 构建队列
function queue(arr) {
 var sequence = Promise.resolve()
 arr.forEach(function (item) {
  sequence = sequence.then(item)
 })
 return sequence
}

// 执行队列
queue([a, b, c])
 .then(data => {
  console.log(data)// abc
 })

方法三(使用async、await构建队列)

同方法二,只是显得更高大上点

代码

async function queue(arr) {
 let res = null
 for (let promise of arr) {
  res = await promise(res)
 }
 return await res
}
queue([a, b, c])
 .then(data => {
  console.log(data)// abc
 })

顺便说一句,bluebird的Promise.reduce也可以用来顺序执行函数,但是可使用的场景非常有限,一般用来读取文件信息,而以上给出的方法,不管你在异步函数中做了什么,只要函数最后返回了一个Promise对象,都可以使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
jquery实现动态添加附件功能
Oct 23 #jQuery
Vue创建头部组件示例代码详解
Oct 23 #Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 #Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 #Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
React SSR样式及SEO的实践
Oct 22 #Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 #Javascript
You might like
php实现mysql同步的实现方法
2009/10/21 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
React实现轮播效果
2020/08/25 Javascript
python实现人工智能Ai抠图功能
2019/09/05 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
法律专业实习鉴定
2013/12/22 职场文书
工作岗位说明书模板
2014/05/09 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书