【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 或留言，本人会在第一时间与您联系，谢谢！！

长按二维码关注咱们，了解最新前端资讯