[JavaScript] 비동기 작업 - promise(), then(), catch()

이번 글은 비동기 작업에서 사용되는 promise, then, catch에 대한 글이다.

비동기 작업에 대한 설명글은 아래 링크를 참고하면 된다.

https://hwangseoyoung.tistory.com/197

[JavaScript] 비동기 작업 - setTimeout(), 콜백함수

 

---

 

[ 객체 promise ]

promise는 객체로 비동기 작업을 효율적으로 처리하도록 도와주는 JS의 내장 객체이다.

비동기 작업의 성공하거나 실패한 결과값을 이용할 수 있다.

setTimeout()과 같은 비동기 작업을 감싸는 객체로 감싼 것을 실행하고 상태 관리하고 결과를 저장하고 병렬로 실행하고 재실행 하는 등의 역할을 한다.

promise는 API 호출이나 다른 서버와의 통신 등에서 사용된다.

 

promise 객체는 아래 이미지와 같은 상태로 구성되어 비동기 작업을 관리한다.

• 대기(Pending) : 아직 작업이 완료되지 않은 상태
• 성공(Fulfilled) : 비동기 작업이 성공적으로 마무리된 상태 (이때 대기->성공이 되는 과정을 해결,resolve라고 표현)
• 실패(Rejected) : 비동기 작업이 실패한 상태 (이때 대기->성공이 되는 과정을 거부,rejected라고 표현)

 

위의 상황을 웹페이지 로드에 비유하면 다음과 같다.

대기 상황의 경우 로딩창이 뜨는 로드 되는 창, 성공의 경우 로딩창 이후 뜨는 해당 웹페이지의 화면, 실패의 경우 로딩창에서 해당 웹페이지를 로딩에 실패한 이유에 대한 창이 뜨는 것이다.

 

 

---

 

 

[ 객체 promise 생성하기 ]

아래 코드를 보면 생성자 Promise()로 생성하였다.

생성자의 인수로 비동기 작업을 진행할 콜백함수를 넣어주었고 이때 이 비동기 작업을 실행하는 함수는 executor라고 부른다.

이 executor함수의 매개변수는 resolve와 reject 2가지가 존재하고 이 둘은 인수로 결과값을 전달한다.

• resolve : 비동기 작업 성공 시 실행되는 함수
• reject : 비동기 작업 실패 시 실행되는 함수

따라서 아래 코드를 보면 resolve와 reject의 ()안에 해당하는 내용들이 다 결과값으로 전달되는 내용들이다.

만약 ()가 비어져있다면 result가 비어져있는 것을 확인할 수 있다.

 

예제 코드 1 )

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const num = 10;

    if (typeof num === "number") {
      resolve(num + 10);
    } else {
      reject("num이 숫자가 아닙니다");
    }
  }, 2000);
});

 

 

---

 

 

[ then 메서드 ]

then 메서드는 promise 성공 시에만 실행되고 콜백함수의 메서드로 resolve의 결과값을 제공받는다.

 

 

---

 

 

[ catch 메서드 ]

catch 메서드는 then 메서드의 실패 버전으로 콜백함수의 메서드로 reject의 결과값을 제공받는다.

 

 

---

 

 

[ then과 catch 활용 예제 ]

따라서 위의 예제 코드 1에 덧붙여 아래 코드를 실행하면 다음과 같이 결과가 실행된다.

실행 과정 : executor에서 성공하였으므로 resolve()가 호출됨 => 성공 시 실행되는 then 메서드의 콜백함수가 실행되어 resolve()의 결과값을 then 메서드의 콜백함수의 매개변수로 제공함 => 결과값 출력

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const num = 10;

    if (typeof num === "number") {
      resolve(num + 10);
    } else {
      reject("num이 숫자가 아닙니다");
    }
  }, 2000);
});

promise.then((value) => {
  console.log(value);
});

promise.catch((error) => {
  console.log(error);
});

결과값

 

 

---

 

 

[ Promise Chaining ]

Promise Chaining은 then과 catch를 연달아 사용하는 것으로 아래 코드와 같이 중복되는 부분이 있을 때 사용 가능하다.

then과 catch 모두 호출 결과 promise 객체를 다시 반환한다.

promise.then((value) => {
  console.log(value);
});

promise.catch((error) => {
  console.log(error);
});

 

Promise Chaining을 적용하면 다음과 같다.

promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  });

 

 

---