ES6 Promise 并行执行和顺序执行

4,710 阅读2分钟

顺序执行

先getA然后getB执行,最后addAB

(1)、连续使用then链式操作

function getA(){
      return  new Promise(function(resolve, reject){ 
      setTimeout(function(){     
            resolve(2);
        }, 1000);
    });
}

function getB(){
    return  new Promise(function(resolve, reject){       
        setTimeout(function(){
            resolve(3);
        }, 1000);
    });
}

function addAB(a,b){
    return a+b
}

function getResult(){
    var  obj={};
    Promise.resolve().then(function(){
        return  getA() 
    })
    .then(function(a){
         obj.a=a;
    })
    .then(function(){
        return getB() 
    })
    .then(function(b){
         obj.b=b;
         return obj;
    })
    .then(function(obj){
       return  addAB(obj['a'],obj['b'])
    })
    .then(data=>{
        console.log(data)
    })
    .catch(e => console.log(e));

}
getResult();

(2)、使用promise构建队列

function getResult(){
    var res=[];
    // 构建队列
    function queue(arr) {
      var sequence = Promise.resolve();
      arr.forEach(function (item) {
        sequence = sequence.then(item).then(data=>{
            res.push(data);
            return res
        })
      })
      return sequence
    }

    // 执行队列
    queue([getA,getB]).then(data=>{
        return addAB(data[0],data[1])
    })
    .then(data => {
        console.log(data)
    })
    .catch(e => console.log(e));

}

getResult();

(3)、使用async、await实现类似同步编程

async函数内部实现同步

function getResult(){
 async function queue(arr) {
  let res = []
  for (let fn of arr) {
    var data= await fn();
    res.push(data);
  }
  return await res
}

queue([getA,getB])
  .then(data => {
    return addAB(data[0],data[1])
  }).then(data=>console.log(data))

}

(4)使用数组reduce实现,但是和使用then链式原理一样,只是简化代码

let sum = 0;
const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next).then(r=>sum+=r), Promise.resolve());

 runPromisesInSeries([getA, getB]).then(r=>{
    console.log("r:"+r); //r : 5
    console.log("sum"+sum ); //sum : 5
});

并行执行

主要是依赖Promise.all和Promise.race

  • Promise.all:所有的Promise执行完毕后(reject|resolve)返回一个Promise对象。

  • 所有promise对象都resolved完成,返回所有参数的resolve结果。

  • 其中一个promise对象rejected失败,此实例返回失败,失败原因是第一个失败的结果。

  • Promise.race任意一个Promise对象执行完毕后返回一个Promise对象。

一旦其中一个promise对象返回成功或失败, 返回的实例就会返回成功或失败的结果。

(1)、Promise.all 并行执行promise

例:getA和getB并行执行,然后输出结果。如果有一个错误,就抛出错误

/**
 * 每一个promise都必须返回resolve结果才正确
 * 每一个promise都不处理错误
 */

const getA = new Promise((resolve, reject) => {
   //模拟异步任务
   setTimeout(function(){
     resolve(2);
   }, 1000) 
})
.then(result => result)

const getB = new Promise((resolve, reject) => {
   setTimeout(function(){
     // resolve(3);
     reject('Error in getB');
   }, 1000) 
})
.then(result => result)

Promise.all([getA, getB]).then(data=>{
    console.log(data)
})
.catch(e => console.log(e);//Error in getB );

getA和getB并行执行,然后输出结果。总是返回resolve结果

/**
 * 每一个promise自己处理错误
 */

const getA = new Promise((resolve, reject) => {
   //模拟异步任务
   setTimeout(function(){
     resolve(2);
   }, 1000) 
})
.then(result => result)
.catch(e=>{

})

const getB = new Promise((resolve, reject) => {
   setTimeout(function(){
     // resolve(3);
     reject('Error in getB');
   }, 1000) 
})
.then(result => result)
.catch(e=>e)

Promise.all([getA, getB]).then(data=>{
    console.log(data)
})
.catch(e => console.log(e)); //[2, "Error in getB"]

(2)Promise.race

监视多个Promise。接受一个包含需监视的Promise的可迭代对象,并返回一个新的Promise,但一旦来源Promise中有一个被解决,所返回的Promise就会立刻被解决。

当promise实例参数其中一个状态改变, 返回的promise状态就会被改变。