【ES6第16期】async、await開發中的經驗之談

最近運用async、await對現有項目異步操做進行優化，主要是請求後端接口方面，在前期咱們是這樣作的

const getList1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('getList1')
    }, 2000)
  })
}
const getList2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('getList2')
    }, 2000)
  })
}
async function test() {
  console.time('time')
  const res1 = await getList1()
  console.log(res1)
  const res2 = await getList2()
  console.log(res2)
  console.timeEnd('time')
}
test()
複製代碼

如上，當咱們運用如上進行測試後發現，請求的時長有4s多，這是由於咱們上面的這種寫法屬於串行的方式，在getList1返回數據後，纔會去請求getList2。因此時長會超過4s。咱們如何將這兩個互補依賴的接口運用並行的方式，減小請求時長尼？？通過試驗發現能夠經過以下操做來實現。

const getList1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('getList1')
    }, 2000)
  })
}
const getList2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('getList2')
    }, 2000)
  })
}
async function test() {
  console.time('time')
  let res1 = getList1()
  let res2 = getList2()
  res1 = await res1
  console.log(res1)
  res1 = await res2
  console.log(res2)
  console.timeEnd('time')
}
test()
複製代碼

注意：getList1與getList2必須在await以前，不然還是串行

如以爲有疑問，或者有更好的方案，歡迎留言

若有侵權，請發郵箱至wk_daxiangmubu@163.com 或留言，本人會在第一時間與您聯繫，謝謝！！

長按二維碼關注咱們，瞭解最新前端資訊