async/await 並列リクエストとエラー処理

この記事では、主に async/await 並列リクエストとエラー処理について紹介します。必要な友達に共有します。コードの実行順序を間違えやすいです。例えば、2つのリクエストを同時に開始したい場合は、次のコードを記述します

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関数の実行時間は3秒ではなく7秒です

並列リクエストをしたい場合は以下のように書く必要があります

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

を使用してください

興味がある場合は、コードと

コードをテストします

以上がこの記事です。全内容は、皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

nodeはLagou.comデータをクロールし、Excelファイルとしてエクスポートします

ネイティブJSは、window.scrollTo()に基づいて垂直スクロールアニメーションツール関数をカプセル化します

ブラウザとNodeJS EventLoop の類似点と相違点、およびいくつかのマシン

以上がasync/await 並列リクエストとエラー処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。