如何優雅的實現多個接口併發？且監聽最終結果

相信你們工做中調用接口的狀況很常見，有時候會有這樣的需求：進入頁面須要多個接口調用結束後，才能讓用戶進行操做！而這幾個接口自己並無前後順序的要求。你會怎麼作？

一、儲存變量方法

由於接口調用是異步行爲，因此咱們能夠在調用成功的回調函數中標記不一樣的變量（默認值都設置爲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"]