JS ループで async と await を正しく使用する方法

概要（ループモード - 共通）

のために
地図
各
フィルター

配列と非同期メソッドを宣言して反復する

配列を宣言する: ⬇️

const スキル = ['js'、'vue'、'node'、'react']

別のPromise非同期コードを宣言します: ⬇️

関数 getSkillPromise (値) {
  新しい Promise を返します ((resolve, reject) => {
    タイムアウトを設定する(() => {
      解決(値)
    }, 1000)
  })
}

forループで使用する

for ループは関数ではなく、関数内で async と await を使用する必要があるため、for ループ内に関数のレイヤーをラップする必要があります。

非同期関数テスト（）{
  (i = 0 とします; i < スキルの長さ; i++) {
    const スキル = スキル[i]
    const res = getSkillPromise(skill) を待機します
    コンソール.log(res)
  }
}

test() // 呼び出し

await を使用する場合、待機中の promise が結果を返すまで JavaScript の実行を一時停止する必要があります。上記の結果は、for ループ内に非同期コードがある場合、for ループ内の非同期コードが完全に実行されるまで待ってから、for ループ後のコードを実行できることを意味します。

しかし、forEach、map、filter などのコールバックループは処理できません。以下は詳細な分析です。

マップでの使用

map で await を使用する場合、非同期関数は常に promise を返すため、map の戻り値は常に promise 配列になります。

非同期関数テスト（）{
  コンソールログ('開始')
  const res = skills.map(非同期アイテム => {
    getSkillPromise(item) を待機して戻ります。
  })
  コンソール.log(res)
  コンソールログ('終了')
}

テスト（）

結果：常に約束の配列

始める
[
  Promise { <保留中> },
  Promise { <保留中> },
  Promise { <保留中> },
  約束 { <保留中> }
]
終わり

Promise が満たされるまで待機したい場合は、promise.all() を使用して処理できます。

非同期関数テスト（）{
  コンソールログ('開始')
  const res = skills.map(非同期アイテム => {
    getSkillPromise(item) を待機して戻ります。
  })
  const resPromise = Promise.all(res) を待機します
  コンソールログ(resPromise)
  コンソールログ('終了')
}

テスト（）

// 結果開始
[ 'js'、'vue'、'node'、'react' ]
終わり

forEachで使用する

まず、コードと結果

非同期関数テスト（）{
  コンソールログ('開始')
  スキル.forEach(非同期アイテム => {
    const res = getSkillPromise(item) を待機します
    コンソール.log(res)
  })
  コンソールログ('終了')
}

テスト（）

期待される結果

'始める'
'js'
「ビュー」
'ノード'
「反応する」
'終わり'

実際の結果は、forEach ループが非同期結果が返されるのを待機する前に、console.log('end') が実行されることです。

'始める'
'終わり'
'js'
「ビュー」
'ノード'
「反応する」

JavaScript の forEach は Promise の認識をサポートしておらず、async と await もサポートしていないため、forEach で await を使用することはできません。

フィルターで使用する

フィルターを使用して、アイテムを vue または react オプションとしてフィルターします。

フィルターを通常どおり使用します:

非同期関数テスト（）{
  コンソールログ('開始')
  const res = スキル.フィルター(アイテム => {
    ['vue', 'react'].includes(item) を返します。
  })
  コンソール.log(res)
  コンソールログ('終了')
}

test() // 呼び出し // 結果開始
[ 'vue'、'react' ]
終わり

await を使用した後:

非同期関数テスト（）{
  コンソールログ('開始')
  const res = skills.filter(非同期アイテム => {
    const スキル = getSkillPromise(item) を待機します
    ['vue', 'react'].includes(item) を返します。
  })
  コンソール.log(res)
  コンソールログ('終了')
}

テスト（）

期待される結果:

始める
[ 'vue'、'react' ]
終わり

実際の結果:

[ 'js'、'vue'、'node'、'react' ]
終わり

結論: 非同期関数 getSkillPromise によって返される promise は常に true であるため、すべてのオプションがフィルターを通過します。

使用概要を添付

await 呼び出しを連続して実行する場合は、 for ループ (またはコールバックのない任意のループ) を使用します。
forEach では await を使用しないでください。代わりに for ループ (またはコールバックのない任意のループ) を使用してください。
filter と Reduce では await を使用しないでください。必要に応じて、map を使用して結果をさらに処理し、filter と Reduce を使用して結果を処理します。

結論：作業中に発生した大規模なフォーム抽出コンポーネントのため、非同期検証でこの問題が発生しました。その後、データを調べた後、結果が要約されました。

要約する

JS ループでの async と await の正しい使用法に関するこの記事はこれで終わりです。JS ループでの async と await の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: