JavaScript で指定された Promise の配列を継続的に実行するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript で指定された Promise の配列を継続的に実行するにはどうすればよいですか?

PHPz

リリース： 2023-09-24 13:25:02

転載

763 人が閲覧しました

如何在 JavaScript 中连续运行给定的 Promise 数组？

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(&#39;bluebird&#39;);

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 サイトの他の関連記事を参照してください。