JavaScript에서 주어진 Promise 배열을 지속적으로 실행하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript에서 주어진 Promise 배열을 지속적으로 실행하는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-09-24 13:25:02

앞으로

723명이 탐색했습니다.

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

JavaScript에는 일련의 Promise를 병렬로 실행할 수 있는 "Promise.all"이라는 메서드가 있습니다. 그러나 약속을 계속해서 이행하고 싶을 때가 있을 수 있습니다. 이는 각 Promise가 순서대로 실행되도록 하고 싶거나 다음 Promise를 실행할 때 한 Promise의 결과를 사용해야 하는 경우에 유용합니다.

JavaScript에서 일련의 Promise를 연속적으로 실행할 수 있는 몇 가지 방법이 있습니다. 이번 글에서는 그 중 일부를 소개하겠습니다.

Promise.prototype.then()

Promise 배열을 직렬로 실행하는 한 가지 방법은 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() 메서드를 사용하여 세 개의 Promise를 연결합니다. 첫 번째 Promise는 값 1로 확인되어 해당 값을 표시합니다. 두 번째 Promise는 값 2로 확인되며 이 값도 표시됩니다. 마지막으로 세 번째 Promise는 값 3으로 확인되어 해당 값을 표시합니다.

"then" 메서드는 Promise를 반환하기 때문에 이 방법으로 Promise를 연결하여 시리즈를 만들 수 있습니다.

for-await-of

일련의 Promise 배열을 실행하는 또 다른 방법은 "for-await-of" 루프를 사용하는 것입니다. 이 루프를 사용하면 for 루프 내에서 wait 키워드를 사용할 수 있습니다. wait 키워드는 약속이 이행될 때까지 코드 실행을 일시 중지합니다.

Example

여기에 예가 있습니다. -

<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 API가 제공하는 것보다 더 많은 기능이 필요한 경우 Bluebird 또는 Q와 같은 라이브러리를 사용할 수 있습니다. 이러한 라이브러리는 Promise 작업을 위한 추가 방법을 제공합니다.

예를 들어 Bluebird는 값 배열을 Promise 배열에 매핑한 다음 모든 값이 충족될 때까지 기다릴 수 있는 "map" 메서드를 제공합니다. -

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!