美文网首页JavaScript
JavaScript学习----Promise并行执行异步操作(

JavaScript学习----Promise并行执行异步操作(

作者: 扮猪老虎吃 | 来源:发表于2021-01-22 10:59 被阅读0次

    Promise.all

    Promiseall方法提供了并行执行异步操作的能力
    执行回调的时机:所有异步操作执行完成。
    举例:

    Promise.all([this.runAsync1(), this.runAsync2(), this.runAsync3()]).then(function(results) {
      console.log(results)
    })
    

    其中,runAsync1()runAsync2()runAsync3()定义如下:

        runAsync1() {
          return new Promise(function(resolve, reject) {
            setTimeout(function() {
              console.log('异步任务1执行完成')
              resolve('随便什么数据1')
            }, 1000)
          })
        },
        runAsync2() {
          return new Promise(function(resolve, reject) {
            setTimeout(function() {
              console.log('异步任务2执行完成')
              resolve('随便什么数据2')
            }, 2000)
          })
        },
        runAsync3() {
          return new Promise(function(resolve, reject) {
            setTimeout(function() {
              console.log('异步任务3执行完成')
              resolve('随便什么数据3')
            }, 2000)
          })
        }
    
    

      Promise.all中,all接收一个数组参数,里面的值最终都算返回Promise对象。这样,三个异步操作的并行执行的,等到它们都执行完后才会进到then里面。那么,三个异步操作返回的数据哪里去了呢?都在then里面呢,all会把所有异步操作的结果放进一个数组中传给then,就是上面的results。所以上面代码的输出结果就是:

    Promise.all示例结果

    Promise.race

      all方法的效果实际上是「谁跑的慢,以谁为准执行回调」,那么相对的就有另一个方法「谁跑的快,以谁为准执行回调」,这就是race方法,race一词就是赛跑的意思。race的用法与all一样,修改runAsync2的延时为0.5秒来看一下:

        Promise.race([this.runAsync1(), this.runAsync2(), this.runAsync3()]).then(function(results) {
          console.log(results)
        })
    

    这三个异步操作同样是并行执行的。0.5秒后runAsync2已经执行完了,此时then里面的就执行了。结果是这样的:

    Promise.race示例结果
      then里面的回调开始执行时,runAsync1()和runAsync3()并没有停止,仍旧再执行,执行完成后输出了结束的标志。

    相关文章

      网友评论

        本文标题:JavaScript学习----Promise并行执行异步操作(

        本文链接:https://www.haomeiwen.com/subject/lupdzktx.html