如何优雅的实现多个接口并发？且监听最终结果

相信你们工做中调用接口的状况很常见，有时候会有这样的需求：进入页面须要多个接口调用结束后，才能让用户进行操做！而这几个接口自己并无前后顺序的要求。你会怎么作？

一、储存变量方法

由于接口调用是异步行为，因此咱们能够在调用成功的回调函数中标记不一样的变量（默认值都设置为false），等到当前接口完的时候，会把当前变量设置为true。最终判断全部变量值都为true。很明显这样会须要不少全局变量，并且很复杂。因此不推荐使用。

ES6 promise方法

咱们都知道使用fetch调用接口会返回一个Promise实例，所以咱们模拟一个Promise异步返回：

const wait = ms => new Promise((resolve, reject) => {
  setTimeout(() => {
      console.log(`wait ${ms}ms`)
      resolve(`wait ${ms}ms`)
  }, ms)
})

const PA = Promise.all([wait(3000), wait(1000), wait(2000)])
// 依次打印：wait 1000ms wait 2000ms wait 3000ms
//PA => Promise {<pending>}
PA.then(res => console.log(res))

经过上面Promise.all执行结果能够看出来，返回了一个新的Promise实例，能够经过.then回调处理，可是看起也是不太优雅！

配合ES7 async/await方法

ES7为处理异步方法提供Generator的语法糖写法async/await方法。

可是，若是仅仅使用await的方法，接口会被阻塞，即执行顺序变成了同步的效果了；因此，经过await + Promise的方法写起来十分优雅、简洁。

const wait = ms => new Promise((resolve, reject) => {
  setTimeout(() => {
      console.log(`wait ${ms}ms`)
      resolve(`wait ${ms}ms`)
  }, ms)
})
;(async () => {
  const PA = await Promise.all([wait(3000), wait(1000), wait(2000)])
  // 依次打印：wait 1000ms wait 2000ms wait 3000ms
  console.log(PA)
})()

//wait 1000ms 
//wait 2000ms 
//wait 3000ms 
//["wait 3000ms", "wait 1000ms", "wait 2000ms"]