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

 更新时间:2018年10月23日 08:41:54   作者:vcxiaohan2  
这篇文章主要介绍了详解如何构建Promise队列实现异步函数顺序执行,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

场景

有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对象,都可以使用

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

相关文章

  • js+HTML5实现视频截图的方法

    js+HTML5实现视频截图的方法

    这篇文章主要介绍了js+HTML5实现视频截图的方法,涉及javascript操作html5元素实现多媒体文件截图的相关技巧,需要的朋友可以参考下
    2015-06-06
  • JavaScript 拖拉缩放效果

    JavaScript 拖拉缩放效果

    拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如选框效果。
    2008-12-12
  • JavaScript 事件属性绑定带参数的函数

    JavaScript 事件属性绑定带参数的函数

    在JavaScript中,为了实现表现和控制相分离,可以通过0级的DOM事件属性或者2级的事件模型来实现,不过这两者在针对某个事件类型调用相应的事件句柄的时候,不能给事件句柄提供参数,也就是说,事件属性的值只能是一个函数引用。
    2009-03-03
  • js构建二叉树进行数值数组的去重与优化详解

    js构建二叉树进行数值数组的去重与优化详解

    这篇文章主要给大家介绍了关于js构建二叉树进行数值数组的去重与优化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-03-03
  • JS弹出居中的DIV的代码

    JS弹出居中的DIV的代码

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DIV的显示位置。
    2008-06-06
  • jquery获取radio值(单选组radio)

    jquery获取radio值(单选组radio)

    jquery获取radio值使用到特殊的选择器type=radio,为方便大家理解,另附一个jquery实例,想学习的朋友可以看看
    2014-10-10
  • JavaScript数组的栈方法与队列方法详解

    JavaScript数组的栈方法与队列方法详解

    这篇文章主要介绍了JavaScript数组的栈方法与队列方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • js的表单操作 简单计算器

    js的表单操作 简单计算器

    javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
    2011-12-12
  • javascript实现时钟动画

    javascript实现时钟动画

    这篇文章主要为大家详细介绍了javascript实现时钟动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JS通过相同的name进行表格求和代码

    JS通过相同的name进行表格求和代码

    表格求和想必大家并不陌生,下面为大家详细介绍下通过相同的name进行表格求和,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08

最新评论