전문가처럼 약속을 대하다😎

만약 당신이 한동안 자바스크립트 개발자로 일했다면, 당신은 반드시 약속을 만날 것이다.하면, 만약, 만약...

A Promise is a proxy for a value not necessarily known when the promise is created. -- MDN

나는 이미 한동안 토론을 했는데, 나는 그것들이 자바스크립트로 비동기적인 조작을 나타내는 좋은 방식이라고 생각한다.비록 그것들은 매우 훌륭하지만, 그것들에 내장된 많은 기능들을 우리 대부분은 모른다. (나 자신을 포함해서, 일주일 전까지는.)
오늘의 이 글을 통해 저는 Promise 대상의 네 가지 재미있는 내장 특성을 설명하고 싶습니다.
우리가 깊이 토론하기 전에, 여기는 내가 시범에서 사용한 실용 프로그램이다

// configs for the createPromiseArrayFromConfig function
const allItemsWillResolve = [
  { settleAfterSeconds: 1, shouldReject: false },
  { settleAfterSeconds: 1, shouldReject: false },
];
const someItemsReject = [
  { settleAfterSeconds: 1, shouldReject: false },
  { settleAfterSeconds: 1, shouldReject: true },
  { settleAfterSeconds: 1, shouldReject: false },
];
const allItemsReject = [
  { settleAfterSeconds: 1, shouldReject: true },
  { settleAfterSeconds: 1, shouldReject: true }
];
const itemsWillResolveAtDifferentTime = [
  { settleAfterSeconds: 1, shouldReject: false },
  { settleAfterSeconds: 2, shouldReject: false },
];

// creates an array of promises from the provided config
function createPromiseArrayFromConfig(arrayOfConfigs) {
  // map over the array config objects and return a new Promise for each item as per the config
  return arrayOfConfigs.map(
    ({ settleAfterSeconds, shouldReject }, index) =>
      new Promise((resolve, reject) => {
        // wait "settleAfterSeconds" seconds before settling the promise
        setTimeout(() => {
          if (shouldReject) {
            reject(`Item at ${index} index couldn't resolve! `);
          } else {
            resolve(`Item at ${index} index resolved fine!`);
          }
        }, settleAfterSeconds * 1000);
      })
  );
}

UTIL에서 알 수 있듯이 우리는 Promise 방법의 네 장면을 각각 실행하고 각 방법의 행동을 볼 것입니다.

약속할게.모두()

Promise.all 입력 가능한 공약을 입력한 다음에 공약을 되돌려줍니다. 이 공약은 입력 공약의 결과 그룹으로 해석됩니다.
그러나 입력 그룹에서 온 단일 약속이 거부되더라도 되돌아오는 약속은 거부된다.거부 정보/오류는 첫 번째 거부된 항목의 정보/오류입니다.
우리의 예를 통해 그것의 행위를 이해하자.

위 그림에서 보듯이

allItemsWillResolve 두 문자열 메시지로 해석된 그룹을 설정합니다.

someItemsReject 설정이 실패했고 두 번째로 약속을 거부했습니다. 첫 번째 실패이기 때문입니다.

allItemsReject 설정이 실패했습니다. 첫 번째 실패이기 때문에 약속을 거부했습니다.

구성의 해석itemsWillResolveAtDifferentTime은 2초가 소요됩니다.모든 항목이 같은 시간에 해석을 시작하는데 Promise.all 해석에 소요되는 시간은 수조에서 가장 긴 약속에 소요되는 시간과 거의 같기 때문이다.

One point to note here is that in some environments like "codesandbox" you might see 3 seconds as output, (happened with me). This can be due to other things running in the app, leaving the setTimeout no chance to run later at 2 seconds. I would recommend opening the output in a new tab and see if the output is correct.

용례

사용Promise.all의 좋은 점은 수조에서 비동기적인 조작을 수행하고 Promise.all로 포장이 되돌아오는 약속수조를 호출하는 것이다.
이것은 Promise.all의 잠재적인 용례이다. 한 사용자가 "우리 플랫폼에서 모든 이미지를 압축하기를 원한다. 그들은 일부 데이터, 즉 모두 완성하거나 실패로 간주하기를 원하지 않는다"고 고려한다.
여기서 조작은 서로 의존한다. 즉, 우리는 모든 조작/공약이 해결되는지만 관심을 가진다. 왜냐하면 zip에 그 중의 한 조작이 부족하더라도'우리의 조작은 완전하지 않다'.따라서 단일 Promise.all 호출을 사용하고, 작업이 실패할 때 사용자에게 오류를 표시하는 것이 좋습니다.

약속할게.모두 해결()

Promise.allSettled 약속한iterable를 입력으로 하고 약속을 되돌려줍니다. 모든 약속이 해결되거나 거절된 후에 이 약속은 해결됩니다. 그 중에서 하나의 대상 그룹을 포함하고 각 대상이 사용하거나value reason 각 약속의 결과를 설명합니다.
우리의 예를 통해 그것의 행위를 이해하자.

위 그림에서 보듯이

allItemsWillResolve 설정은 두 대상의 수조로 해석되고 각 대상은 하나status와 하나value가 있다.

someItemsReject 설정은 이번에 거절하지 않고 3개의 대상을 포함하는 수조로 되돌아간다. 그 중에서 두 번째 대상status은'거절'이고 reason은 error message이다.두 번째 항목에는 value라는 키가 없습니다.

allItemsReject 구성은 거부status로 반환됩니다.

itemsWillResolveAtDifferentTime 설정은 2초가 걸려야 해석할 수 있다. 왜냐하면 그의 작업 원리는 Promise.all와 유사하기 때문이다.

용례

Promise.allSettled의 좋은 예는 사용자 (위의 Promise.all 예시에서 온) 에게 대화상자를 표시하는 것입니다. 되돌아오는 데이터를 보고 각자의 메시지를 표시하면 모든 파일을 압축할 수 없습니다.이전에 비해 이것은 더 좋은 사용자 체험이다. 우리는 우리가 발견한 첫 번째 오류만 보여 준다.

약속할게.모든 ()

Promise.any 한 공약을 입력으로 하고 한 공약을 되돌려줍니다. 이 공약은 수조에서 한 공약을 현금으로 바꿀 때 바로 해석되고 공약의 값을 가지고 있습니다.

Promise.any is only available from Node version 15 and above

우리의 예를 통해 그것의 행위를 이해하자.

위 그림에서 보듯이

구성이 첫 번째 약속으로 해결되었습니다.

구성이 첫 번째 약속으로 해결되었습니다.

allItemsWillResolve 설정은 모든 약속이 거부되었기 때문에 하나AggregateError를 되돌려줍니다.

분석someItemsReject 설정은 1초가 걸린다. 우리가 제공한 두 가지 약속 중 첫 번째 약속은 1초가 걸리기 때문이다.

용례

allItemsReject의 좋은 예는 여러 출처에서 같은 자원을 요청하고 받은 첫 번째 자원을 표시하는 것이다.우리의 고객을 첫 번째 지원 보조에 연결하려면 가장 좋은 방법은 모든 고객과 연결을 요청한 다음에 가장 빠른 응답을 선택하는 것이다.

약속할게.시합

itemsWillResolveAtDifferentTime 한 공약을 입력으로 하고 한 공약을 되돌려줍니다. 이 공약이 수조에서 한 공약을 이행하거나 거절할 때 즉시 이행하거나 거절하고 그 공약의 값이나 원인을 가지고 있습니다.
우리의 예를 통해 그것의 행위를 이해하자.

위 그림에서 보듯이

구성이 첫 번째 약속으로 해결되었습니다.

구성이 첫 번째 약속으로 해결되었습니다.

Promise.any 구성은 첫 번째 약속이 거부된 오류를 반환합니다.

분석Promise.race 설정은 1초가 걸린다. 우리가 제공한 두 가지 약속 중 첫 번째 약속은 1초가 걸리기 때문이다.

몇 가지 요점

iterable passed가 비어 있으면 되돌아오는 약속은 영원히 끊깁니다.

만약iterable가 하나 이상의 비공약값과/또는 이미 확정된 공약을 포함한다면 승낙한다.race는iterable의 첫 번째 값으로 해석됩니다.

Also, unlike Promise.any(), which returns the first fulfilled value, this method returns the first settled (fulfilled or rejected) value.

용례

allItemsWillResolve의 좋은 예는 조작을 위한 마감 타이머를 설정하는 것이다. 그러면 주어진 조작이 x초 안에 완성되지 않으면 우리는 오류를 던질 것이다.

// wait for "seconds" before rejecting promise (throws error)
function rejectAfter(seconds) {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(`Request couldn't resolve in ${seconds}`), seconds * 1000)
  })
}

// this will throw an error if the request doesn't resolve in // 5 seconds
function testCutoff() {
  return Promise.race([testPromise, waitFor(5)])
}

비디오 자습서 및 예

너도 영상을 보면서 실제 예를 볼 수 있어.
코드sandboxhere를 사용하여 포크 게임을 할 수 있습니다.
나는 네가 이 문장을 즐겨 읽기를 바란다. 마치 내가 그것을 즐겨 쓰는 것과 같다.
더 많은 정보를 원하시면 계속해서 저를 주목해 주십시오

Until next time

사용된 리소스

이 글을 연구할 때 나는 추적했다MDN docs.