> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 Promise.all 및 Promise.race 메서드 소개(코드 포함)

JavaScript의 Promise.all 및 Promise.race 메서드 소개(코드 포함)

不言
풀어 주다: 2019-03-15 14:10:10
앞으로
3622명이 탐색했습니다.

이 글은 JavaScript의 Promise.all 및 Promise.race 메소드(코드 포함)를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Promise.all() 메서드는 Promise 객체나 일반 값이 포함된 배열(또는 기타 반복 가능한 객체)을 매개변수로 받아들이고 Promise를 반환합니다. 모든 Promise 객체가 해결되면 Promise.all() 해결 결과로 해결된 모든 값이 배열로 사용됩니다. Promise 중 하나가 거부되면 첫 번째 거부 값이 즉시 Promise.all()의 거부 결과로 사용됩니다.

실제 애플리케이션에서 여러 인터페이스에서 데이터를 가져와서 모든 데이터가 도착한 후 특정 작업을 수행해야 하는 경우 Promise.all()을 사용할 수 있습니다.

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
Promise.all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]
로그인 후 복사

다음은 모든 Promise 개체가 해결되었는지 확인한 다음 결과를 반환하는 카운터가 필요한 코드 구현입니다. 반환된 결과를 순서대로 기록하려면 배열이 필요합니다. for (var i = 0; i < iterable[i]; i++) 와 같은 메소드를 사용하여 순회하는 경우 클로저가 변수 참조만 전달할 수 있다는 문제를 피하기 위해 self 레이어를 중첩해야 합니다. -기능을 실행합니다. 여기서는 for...in 루프가 사용되어 함수가 데이터 구조 Set과 같은 배열 외에 다른 반복 가능한 객체를 지원할 수 있습니다.

const all = function (iterable) {
  return new Promise(function (resolve, reject) {
    let count = 0, ans = new Array(count)
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(function (res) {
          ans[i] = res
          if (--count === 0) resolve(ans)
        }, reject)
        count++
      } else {
        ans[i] = v
      }
    }
  })
}

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]
로그인 후 복사

Promise.all()과 마찬가지로 Promise.race() 메서드는 Promise 개체 또는 공통 값이 포함된 배열(또는 기타 반복 가능한 개체)을 매개 변수로 받아들이고 Promise를 반환합니다. Promise 객체 중 하나가 확인되면 확인된 값은 Promise.race() 확인의 결과로 즉시 사용됩니다. 개체 중 하나가 거부되면 Promise.race도 즉시 거부됩니다.

실제 응용 프로그램에서 여러 인터페이스에서 동일한 데이터를 얻을 수 있는 경우 먼저 도착하는 인터페이스 데이터가 먼저 사용되고 Promise.race()를 사용할 수 있으며 소요 시간은 그중 가장 빠른 인터페이스와 동일합니다. 코드는 다음과 같습니다:

const race = function (iterable) {
  return new Promise(function (resolve, reject) {
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(resolve, reject)
      } else {
        resolve(v)
      }
    }
  })
}
const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = new Promise(function (resolve) { setTimeout(resolve, 100, 2) })
race([p1, p2]).then(function (res) { console.log(res) }) // 2
로그인 후 복사

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

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿