async/await 并行请求和错误处理

Question

async 顺序

并发请求

使用 async 的时候，代码执行的顺序很容易出错，比如我们要同时发起两个请求，可能会写出下面的代码

function fetchName () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('lujs')
    }, 3000)
  })
}
function fetchAvatar () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('https://avatars3.githubusercontent.com/u/16317354?s=88&v=4')
    }, 4000)
  })
}
async fetchUser () {
  const name = await fetchName()
  const avatar = await fetchAvatar()
  return {
    name,
    avatar
  }
}
(async function () {
  console.time('should be 7s ')
  const user = await fetchUser()
  console.log(user)
  console.timeEnd('should be 3s ')
})()

在上面的代码中，我们认为 fetchName，fetchAvatar 会并行执行，实际上并不会。fetchAvatar 会等待 fetchName 执行完之后才开始请求。fetchUser 函数的执行时间不是三秒而是 7 秒。

要并行请求的话需要像下面这样写，fetchUserParallel 的执行时间为 4 秒。

async function fetchUserParallel () {
  const namePromise = fetchName()
  const avatarPromise = fetchAvatar()
  return {
    name: await namePromise,
    avatar: await avatarPromise 
  }
}
(async function () {
  console.time('should be 3s, but time is ')
  const user = await fetchUser()
  console.log(user)
  console.timeEnd('should be 3s, but time is ')
  console.time('should be 3s : ')
  const user2 = await fetchUserParallel()
  console.log(user2)
  console.timeEnd('should be 3s : ')
})()

使用 Promise.all 来并发请求

function fetchList (id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`id is : ${id}`)
    }, 5000)
  })
}
async function getList () {
  const ary = [1, 2, 3, 4]
  const list = Promise.all(
    ary.map(
      (id) => fetchList(id)
    )
  )
  return await list
}
(async function () {
  // 使用 promise 并发请求
  console.time('should be 3s ')
  const list = await getList()
  console.log(list)
  console.timeEnd('should be 3s ')
})()

错误获取

使用 try...catch

try {
  const user3 = await fetchUser(true)
} catch (err) {
  console.error('user3 error:', err)
}

包装 promise，使其返回统一的格式的代码

参考文章

/**
 * 包装 promise, 使其返回统一的错误格式
 * @param {Promise} promise 
 */
function to (promise) {
  return promise.then(res => [null, res]).catch(err => [err])
}
.
const [err, res] = await to(fetchUser(true))
if (err) {
  console.error('touser err:', err)
}

继续使用 catch

// 因为 async 返回的 promise 对象，所以可以使用 catch
const user4 = await fetchUser(true).catch(err => {
  console.error('user4 error:', err)
})

在线代码：https://www.wenjiangs.com/runcode?slug=n67tQz9e