Promise实现并行调用和顺序调用的方法

一、并行调用

• Promise.all实现并行调用，情况一：

   // 情况一：
  const p1 = new Promise((resolve,reject) => {
    setTimeout(() => {
          resolve(2)
      }, 1000)
  })
  const p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
          reject('出错了')
      }, 1000)
  })
  const promiseArr = Promise.all([p1, p2]).then(res => {
      console.log(res)
  }).catch(err => {
      console.log(err)
  })
  注：针对这种情况，只有p1和p2都fullfilled,promiseArr才会fullfilled,执行后面的then方法，当p1和p2中有任何一个出错，都会进入catch中的方法。第一个被reject的返回值将执行catch函数
  

• Promise.all实现变行调用，情况二：

  // 情况二：
  const p1 = new Promise((resolve,reject) => {
      setTimeout(() => {
          resolve(2)
      }, 1000)
  }).catch(err => {
      console.log(err)
  })
  const p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
          reject('出错了')
      }, 1000)
  }).catch(err => {
      console.log(err)
  })
  const promiseArr = Promise.all([p1, p2]).then(res => {
      console.log(res)
  }).catch(err => {
      console.log(err)
  })
       
  注：针对这种情况，由于p1和p2都有自己的catch方法，p2的reject函数将由自己的catch方法捕获，catch函数又会抛出一个新的promise实例，所以promiseArr始终执行后面的then函数，而不会执行catch方法
  

二、 顺序执行

• Promise的链式调用

   /*
     方法一： Promise的链式调用
     实现效果：先执行A，再执行B，最后执行C
     问题：如果其中一个抛错了，后续的promise不会执行
     解决办法：在每一个后面捕获错误信息
     缺点：可读性差,不建议使用
   */
   function getA() {
     return new Promise((resolve,reject) => {
       setTimeout(() => {
         // resolve('A执行了')
         reject('A出错了') 
       },1000)
     })
   }
   function getB() {
     return new Promise((resolve,reject) => {
       setTimeout(() => {
         resolve('B执行了')
       },1000)
     })
   }
   function getC() {
     return new Promise((resolve,reject) => {
       setTimeout(()=> {
         resolve('C执行了')
       },1000)
     })
   }
   function getResult() {
     Promise.resolve()
       .then(() => {
         return getA()
       })
       // .catch((err) => {
       //   console.log(err);
       // })
       .then(res => {
         console.log(res);
         return getB()
       })
       // .catch((err) => {
       //   console.log(err);
       // })
       .then(res => {
         console.log(res);
         return getC()
       })
       // .catch((err) => {
       //   console.log(err);
       // })
       .then(res => {
         console.log(res);
       })
       .catch(err => {
         console.log(err); // 抛出上面then函数中执行时遇到的错误
       })
   }
   getResult()
  

• Promise实现构建队列

  /*
    Promise顺序执行的方法
    方法二： 类似于promise的链式调用，通过Promise实现构建队列
    实现效果：先执行A，再执行B，最后执行C
  */
  function getA() {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('A执行了')
      },2000)
    })
  }
  function getB() {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('B执行了')
      },1000)
    })
  }
  function getC() {
    return new Promise((resolve,reject) => {
      setTimeout(()=> {
        resolve('C执行了')
      },300)
    })
  }
  
  function quene(promiseArr) {
    var promiseObj = Promise.resolve()
    var res = []
    promiseArr.forEach(item => {
      promiseObj = promiseObj.then(item).then(response =>{
        res.push(response)
        return res
      })
    })
    return promiseObj
  }
  function getResult() {
    quene([getA, getB, getC]).then(res => {
      console.log(res); // ["A执行了", "B执行了", "C执行了"]
    }).catch(err => {
      console.log(err);
    })
  }
  getResult()
  

• 利用async和await函数实现同步调用

  /*
    Promise顺序执行的方法
    方法三： 利用async和await实现同步调用
    实现效果：先执行A，再执行B，最后执行C
  */
  function getA() {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('A执行了')
      },2000)
    })
  }
  function getB() {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('B执行了')
      },1000)
    })
  }
  function getC() {
    return new Promise((resolve,reject) => {
      setTimeout(()=> {
        resolve('C执行了')
      },500)
    })
  }
  
  // 同步调用函数
  async function getResult(promiseArr) {
    var res = []
    for (let fun of promiseArr) {
      var resData = await fun()
      res.push(resData)
    }
    return await res
  }
  
  getResult([getA, getB,getC])
    .then(res => {
      console.log(res); // 打印： ['A执行了', 'B执行了', 'C执行了']
    })
    .catch(err => {
      console.log(err);
    })
  
  

参考：ES6 Promise 并行执行和顺序执行