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

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

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"]