ホームページ > 記事 > ウェブフロントエンド > JavaScript で指定された Promise の配列を継続的に実行するにはどうすればよいですか?
JavaScript で指定された Promise の配列を継続的に実行するにはどうすればよいですか?
- PHPz転載
- 2023-09-24 13:25:02717ブラウズ
JavaScript には、一連の Promise を並列実行できる「Promise.all」というメソッドがあります。しかし、約束を果たし続けたい場合もあるでしょう。これは、各 Promise が順番に実行されるようにする場合、または次の Promise を実行するときに 1 つの Promise の結果を使用する必要がある場合に便利です。
JavaScript で一連の Promise を連続して実行するには、いくつかの方法があります。この記事ではその一部を紹介します。
Promise.prototype.then()
Promise の配列を連続して実行する 1 つの方法は、then() メソッドを使用して配列をチェーンすることです。このメソッドは、Promise の完了後に実行される関数を入力として受け入れます。
Example
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
Promise.resolve(1) .then(result => {
document.getElementById("result1").innerHTML = result
return Promise.resolve(2);
}) .then(result => {
document.getElementById("result2").innerHTML = result
return Promise.resolve(3);
}) .then(result => {
document.getElementById("result3").innerHTML = result
});
</script>
</body>
</html>ご覧のとおり、then() メソッドを使用して 3 つの Promise を連結しています。最初の Promise は値 1 に解決され、その値が表示されます。 2 番目の Promise は値 2 に解決され、これも表示されます。最後に、3 番目の Promise は値 3 に解決され、その値が表示されます。
「then」メソッドは Promise を返すため、この方法で Promise を連鎖させてシリーズを作成できます。
for-await-of
Promise の配列を連続して実行するもう 1 つの方法は、「for-await-of」ループを使用することです。このループにより、for ループ内で await キーワードを使用できるようになります。 wait キーワードは、Promise が実行されるまでコードの実行を一時停止します。
例
これは例です -
<html>
<head>
<title>Example- for-await-of</title>
</head>
<body>
<script>
async function runPromisesInSeries() {
for await (const promise of [
Promise.resolve(1),
Promise.resolve(2),
Promise.resolve(3),
]) {
const result = await promise;
document.write(result);
document.write("<br>")
}
}
runPromisesInSeries();
</script>
</body>
</html>この例では、「for-await-of」ループを含む非同期関数があります。このループは一連の Promise を繰り返します。配列内の各 Promise について、Promise が履行されるのを待ちます。 Promise が履行されると、値が表示されます。
ライブラリの使用
ネイティブ Promise API が提供する機能よりも多くの機能が必要な場合は、Bluebird や Q: これらのライブラリは、Promise を操作するための追加メソッドを提供します。
たとえば、Bluebird は、値の配列を Promise の配列にマップし、すべての値が満たされるまで待機できる「マップ」メソッドを提供します -
const Promise = require('bluebird');
Promise.map([1, 2, 3], x => {
return Promise.resolve(x * 2);
}).then(results => {
console.log(results); // [2, 4, 6]
});結論
この記事では、JavaScript で一連の Promise を継続的に実行するためのいくつかの異なる方法を検討しました。 「then」メソッドを使用して Promise を連鎖させる方法、「for-await-of」ループの使用方法、Bluebird や Q などのライブラリの使用方法を見てきました。
以上がJavaScript で指定された Promise の配列を継続的に実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。