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

相信大家工作中调用接口的情况很常见，有时候会有这样的需求：进入页面需要多个接口调用结束后，才能让用户进行操作！而这几个接口本身并没有先后顺序的要求。你会怎么做？

1、储存变量方法

因为接口调用是异步行为，所以我们可以在调用成功的回调函数中标记不同的变量（默认值都设置为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"]