[JS] 프로미스(Promise)

---

알고있으면 좋은 Javascript Tip✨

---

프로미스 (Promise)

• 자바스크립트는 비동기 처리를 위해 콜백함수를 사용한다.
• 하지만 콜백을 너무 남용하게 되면 우리가 흔히 부르는 콜백 지옥에 빠질 수 있다.
• 이런 콜백 함수의 단점을 보완하며 비동기 처리에 사용되는 객체를 프로미스 (Promise)라 한다.

(1) 프로미스(Promise)를 사용하면 다음과 같은 이점은?

• 비동기 처리 시점을 명확하게 표현 할 수 있다.
• 연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연하다.
• 비동기 작업 상태를 쉽게 확인 할 수 있다.

(2) 프로미스(Promise)의 진행 방식은?

• 프로미스 객체를 생성하여 비동기 작업이 완료되면 성공(resolve)과 실패(reject)에 대한 결과값을 인자 값으로 받으며, 성공시 then 메서드를 실행하고 실패시 catch 메서드를 실행한다.
• 후속 처리 메서드(then, catch)를 통해 비동기 처리 결과 또는 에러 메세지를 전달받아 처리한다.

(3) 프로미스(Promise)는 객체가 생성되고 종료될 때까지 3가지 상태를 갖는다.

• Pending(대기) : 비동기 로직 처리의 미완료 상태
• Fulfilled(이행) : 비동기 로직 처리가 완료된 상태로 Promise 결과값 반환 상태
• Rejected(실패) : 비동기 로직 처리의 실패 또는 오류 상태

 

Pending(대기)

• Promise 객체를 생성하면 대기(Pending) 상태이다.

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

• new Promise() 메서드 호출 시 콜백 함수를 선언할 수 있으며, 인자는 resolve와 reject이다.
• 인자(Argument) : 함수를 호출할 때 전달되는 실제 값이다.

Fulfilled(이행)

• 콜백 함수 인자인 resolve를 실행하면 이행된(Fulfilled) 상태이다.
• 이행된 상태를 다른 말로 완료된 상태라고도 한다.

new Promise(function(resolve, reject) {
  resolve();
});

• 이행 상태가 되면 then()을 활용하여 결괏값을 받을 수 있다.

function getData(){
    return new Promise( (resolve, reject) => {
      let data = 10;
      resolve(data);
    })
  }
  
getData().then((resolvedData) => console.log(resolvedData));

// 실행결과
10

• then() 메서드가 호출되면 새로운 Promise 객체가 반환된다.
• then() 메서드를 활용하여 여러 Promise 객체를 연결할 수 있으며, then() 메서드 활용 개수 제한은 없다.

Rejected(실패)

• Promise 객체의 인자인 reject는 호출 시 실패(Rejected) 상태가 된다.

new Promise(function(resolve, reject) {
  reject();
});

• resolve와 마찬가지로, 실패 상태가 되면 catch()를 활용하여 결과값을 받고 예외 처리할 수 있다.

function getData(){
    return new Promise( (resolve, reject) => {
      reject(new Error("This is rejected!"));
    })
  }
  
getData().catch((err) => console.log(err));