ES6: 약속

2604 단어 es6promisesjavascript

약속이란:



ES6의 도입과 함께 Promise가 등장했습니다. 비동기 작업의 성공/실패 완료에 따라 값을 나타내는 개체 클래스입니다.

이름에서 알 수 있듯이 약속을 사용하는 것은 미래에 어떤 작업을 수행하거나 어떤 가치를 제공하겠다는 약속을 하는 것과 비슷합니다.

Promise에는 두 가지 가능한 결과가 있습니다. 성공하고 해결되거나 실패하고 거부됩니다.

약속을 사용하는 이유:


  • 성공 및 오류 콜백을 사용하는 것과 유사하지만 훨씬 깔끔한 방식입니다.
  • 콜백 지옥을 방지합니다(내포된 콜백이 너무 많으면 모두 추적하기 어렵습니다). 이것은 .then() 및 .catch()를 사용하여 수행됩니다. 나중에 더 자세히 설명합니다.

  • 통사론:



    앞에서 간략하게 언급했듯이 약속 객체는 두 개의 매개변수(resolve 및 reject)가 있는 콜백 함수를 받습니다.

    const examplePromise = new Promise((resolve, reject) => {
    
    });
    


    이제 콜백 함수 내에서 약속이 무엇인지 정의합니다.

    const examplePromise = new Promise((resolve, reject) => {
    let grade = 100;
    
    if (grade >= 70) {
     resolve("passed");
    } else {
     reject ("failed");
    }
    
    });
    


    보시다시피 조건이 충족되면 resolve 인수가 호출되고 조건이 충족되면 거부가 호출됩니다. 그러나 해결과 거부는 정확히 무엇을 합니까?

    .then() & .catch()



    여기서 .then() 및 .catch()가 작동합니다.

    .then()은 약속이 해결/거부되면 호출됩니다.
    약속이 거부되면 .catch()가 호출됩니다.

    새로 생성된 약속을 사용하여 다음과 같이 이러한 메서드를 호출하고 연결할 수 있습니다.

    examplePromise
    .then((message) => console.log("you " + message))
    .catch((message) => console.log("you " + message));
    


    .then()은 약속이 해결될 때를 위한 콜백과 약속이 거부될 경우를 위한 선택적 콜백을 전달합니다.

    .catch()는 약속이 거부될 때만 콜백을 전달합니다.

    .then() 및 .catch() 내의 콜백은 각각의 해결 및 거부 호출과 동일한 인수를 전달합니다. 짐작하셨겠지만 등급이 100으로 설정되었으므로 resolve를 호출하고 .then()을 호출하여 콘솔에 기록합니다.
    "you passed"
    앞에서 언급했듯이 .then()은 해결 콜백을 받지만 거부 콜백도 받을 수 있습니다. 친숙하게 들리나요? 그것은 약속과 같습니다. 그것은 .then()에 대한 모든 호출이 새로운 약속을 반환하기 때문입니다. 이것이 우리가 여러 .then() 호출을 연결할 수 있는 이유입니다.

    약속 방법



  • .all() - Promise.all()은 반복 가능한 양의 약속을 받습니다. 각 약속이 확인되면 입력된 약속의 결과 배열로 확인되는 단일 약속을 반환합니다.[1]

  • 입력된 Promise 중 하나라도 거부해야 하는 경우 Promise.all()은 다른 입력 Promise가 해결되었는지 여부에 관계없이 거부된 Promise의 값을 비동기식으로 거부하고 반환합니다.
  • .allSettled() - 반복 가능한 양의 약속을 취하고 해결 또는 거부 여부에 관계없이 결과 배열을 반환합니다.
  • .any() - 반복 가능한 양의 Promise를 가져오고 이행/해결되는 입력 Promise 중 하나의 첫 번째 인스턴스에서 해결되는 Promise를 반환합니다.
  • .race() - .any()와 비슷하지만 해결되거나 거부되는 입력 약속의 첫 번째 인스턴스에서 반환됩니다.

  • [1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

    좋은 웹페이지 즐겨찾기