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)  })

有兴趣的可以用弄得运行一下代码，