JavaScript에서 Promise.all() 및 Promise.allSettled() 메서드 사용

이 튜토리얼에서는 JavaScript에서 Promise Wait를 사용하는 방법을 알려줍니다.

이 튜토리얼에서는 Promise.all() 和 Promise.allSettled() 메소드와 이를 사용하여 여러 Promise를 처리하는 방법을 알려드립니다.

사용Promise.all()방법

Promise 对象具有三个有用的方法，名为 then()、catch() 和 finally() Promise가 완료되면 콜백 메서드를 실행하는 데 사용할 수 있습니다. p>

Promise.all() 方法是一个静态方法，这意味着它属于整个类，而不是绑定到该类的任何特定实例。它接受可迭代的 Promise 作为输入并返回单个 Promise 메서드는 정적 메서드입니다. 즉, 전체 클래스에 속하며 클래스의 특정 인스턴스에 바인딩되지 않습니다. Promise의 반복 가능한 항목을 입력으로 받아들이고 단일 Promise 객체를 반환합니다.

앞서 언급했듯이 Promise.all()메서드는 새로운 Promise를 반환합니다. 이 메서드에 전달된 모든 Promise가 성공적으로 해결되면 이 새 Promise는 결정된 Promise 값의 배열로 해결됩니다. 전달된 Promise 중 하나가 거부되면 이 새 Promise도 거부됩니다.

모든 약속이 성공적으로 해결되었습니다

다음은 모든 Promise가 성공적으로 해결되는 Promise.all() 메소드의 예입니다.

으아아아

Promise.all() 方法之前的语句记录于 19:32:06。此外，我们的第三个 Promise 名为 promise_c 需要最长的时间才能解决，并在 4 秒后解决。这意味着调用 all() 方法返回的 Promise 也应该需要 4 秒才能解析。我们可以通过将回调函数传递给 then() 메소드를 호출하기 전의 진술은 19:32:06에 녹음되었습니다. 또한 promise_c라는 세 번째 Promise는 해결하는 데 가장 오랜 시간이 걸리며 4초 후에 해결됩니다. 이는 all() 메서드를 호출하여 반환된 Promise도 해결하는 데 4초가 걸린다는 의미입니다. 콜백 함수를 then() 메서드에 전달하여 해결하는 데 4초가 걸리는지 확인할 수 있습니다.

여기서 주목해야 할 또 다른 중요한 점은 반환된 완료된 값 배열에는 Promise를 Promise.all() 方法的顺序相同。名为 promise_b 的 Promise 解析速度最快，只需 2 秒。但是，其解析值仍然位于返回数组中的第二个位置。这与我们将 Promise 传递给 Promise.all() 메서드에 전달한 순서와 동일한 순서로 값이 포함된다는 것입니다. promise_b라는 Promise는 해결하는 데 가장 빠른 시간이 2초밖에 걸리지 않습니다. 그러나 구문 분석된 값은 여전히 ​​반환된 배열의 두 번째 위치에 있습니다. 이는 Promise를

메서드에 전달하는 위치와 일치합니다.

이러한 질서 유지는 특정 상황에서 매우 도움이 될 수 있습니다. 예를 들어, 10개의 다른 도시에 대한 날씨 정보를 얻기 위해 10개의 다른 Promise를 사용한다고 가정해 보겠습니다. 이 모든 문제는 동시에 해결되지 않으며, 해결 순서를 미리 아는 것도 불가능합니다. 그러나 Promise가 전달된 순서대로 데이터가 반환된다는 것을 알고 있다면 이후 작업을 위해 이를 올바르게 할당할 수 있습니다.

약속이 거부되었습니다

다음은 거부된 약속 중 하나의 예입니다.

으아아아 all() 方法之前的语句记录于 20:03:43。然而，我们的第二个承诺 promise_b 这次以拒绝告终。我们可以看到 promise_b 在 2 秒后被拒绝。这意味着 all() 方法返回的 Promise 也应该在 2 秒后拒绝，并出现与我们的 promise_b마찬가지로

를 호출할 때에도 동일한 오류가 발생합니다. 출력을 보면 이것이 정확히 무슨 일이 일어나는지 알 수 있습니다.

await

키워드

와 함께 사용하세요 await 关键字用于等待承诺解决，然后再继续下一步。我们还知道 all() 方法返回一个承诺。这意味着我们可以使用 await 以及对 Promise.all()다음 단계로 진행하기 전에 약속이 해결될 때까지 기다리는 데

키워드가 사용된다는 것을 이미 알고 계실 것입니다. 또한 all() 메서드가 Promise를 반환한다는 것도 알고 있습니다. 이는

메서드 호출과 함께 await를 사용할 수 있음을 의미합니다.

기억해야 할 유일한 점은 create_promise() 的函数，它根据提供的数据和持续时间为我们创建承诺。我们的异步 result_from_promises() 函数使用 await은 비동기 함수와 모듈 내에서만 유효하므로 다음과 같이 비동기 함수 내부에 코드를 래핑해야 한다는 것입니다.

으아아아

이번에는 제공된 데이터와 기간을 기반으로 Promise를 생성하는 create_promise()라는 함수를 정의합니다. 비동기 result_from_promises() 함수는 Promise.allSettled() 키워드를 사용하여 Promise가 해결될 때까지 기다립니다.

사용Promise.all()방법

모든 Promise가 성공적으로 해결된 후에 계속 진행하려는 경우

메서드를 사용하는 것이 합리적입니다. 예를 들어 게임 자산을 로드할 때 유용할 수 있습니다.

Promise.allSettled()하지만 다른 도시의 날씨에 대한 정보를 얻고 있다고 가정해 보겠습니다. 이 경우 데이터 수집에 성공한 모든 도시의 날씨 정보를 출력하고, 데이터 수집에 실패하면 오류 메시지를 출력할 수 있습니다.

이 경우에는 🎜🎜 방법이 가장 효과적입니다. 이 메서드는 전달된 모든 커밋이 해결 또는 거부를 통해 해결될 때까지 기다립니다. 이 메서드에서 반환된 Promise에는 각 Promise의 결과에 대한 정보가 포함된 객체 배열이 포함되어 있습니다. 🎜

function create_promise(city) {
  let random_number = Math.random();
  
  let duration = Math.floor(Math.random()*5)*1000;

  return new Promise((resolve, reject) => {
    if (random_number < 0.8) {
      setTimeout(() => {
        resolve(`Show weather in ${city}`);
      }, duration);
    } else {
      setTimeout(() => {
        reject(`Data unavailable for ${city}`);
      }, duration);
    }
  });
}

const promise_a = create_promise("Delhi");
const promise_b = create_promise("London");
const promise_c = create_promise("Sydney");

const my_promises = [create_promise("Delhi"), create_promise("London"), create_promise("Sydney"), create_promise("Rome"), create_promise("Las Vegas")];

async function result_from_promises(promises) {
  let loading_status = await Promise.allSettled(promises);
  console.log(loading_status);
}

result_from_promises(my_promises);

/* Outputs

[
  {
    "status": "fulfilled",
    "value": "Show weather in Delhi"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in London"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Sydney"
  },
  {
    "status": "rejected",
    "reason": "Data unavailable for Rome"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Las Vegas"
  }
]

*/

如您所见，数组中的每个对象都包含一个 status 属性，让我们知道承诺是否已实现或被拒绝。在履行承诺的情况下，它包含 value 属性中的解析值。在被拒绝的 Promise 的情况下，它在 reason 属性中包含拒绝的原因。

最终想法

我们了解了 Promise 类的两个有用方法，它们可以让您同时处理多个 Promise。当您想要在其中一个 Promise 被拒绝后立即停止等待其他 Promise 解决时， Promise.all() 方法很有用。当您想要等待所有承诺解决时，无论其解决或拒绝状态如何， Promise.allSettled() 方法非常有用。

위 내용은 JavaScript에서 Promise.all() 및 Promise.allSettled() 메서드 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!