[JavaScript] ⭐️ Promise

Promise

• 비동기적인 작업의 완료와 실패를 나타낼 수있다.
• 예약시간에 다다랐을때 메세지가 전송된다거나 이런 경우에 사용할수가 있을것 같다.
• promise 객체의 생성은 new 키워드를 통해 할 수있다.
• 프로미스 생성자 함수 내에 두개의 매개변수가 있는데 첫번째는 Resolve 성공, 두번째는 reject 오류 객체를 만들어준다. (executor라고 한다.)
• 비동기적인 작업을 실행할때 사용되며 작업의 결과는 무조건 출력된다. 약속한다고 해서 promise가 되었다고 함.

const promisePrac = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('커피 주문완료 ! :>')
        reject(new Error("결제 실패 :<"))
    }, 1000)
});
console.log("주문 시작!")
promisePrac
    .then((result) => { console.log(result) })
    .catch((error) => { console.log(error) })
    .finally(() => { console.log("끝 :)") })

• 비동기 처리 이후 .then과 catch 체이닝 메서드를 통해 성공 및 실패 이후의 후속처리를 진행할 수 있다.
• 커피 주문을 시작하고 결제에 성공하면 커피 주문완료! :> 를 출력한다.
• 실패하면 결제 실패 :< 오류를 출력한다.
  - 오류 출력시에는 catch를 사용한다.
• finally()에는 성공 실패와 상관없이 무조건 출력된다.

.then : 프로미스가 이행(fulfilled)되었을 때 실행할 콜백 함수를 등록하고, 새로운 프로미스를 반환
.catch : 프로미스가 거부(rejected)되었을 때 실행할 콜백 함수를 등록하고, 새로운 프로미스를 반환
.finally : 프로미스가 이행되거나 거부될 때 상관없이 실행할 콜백 함수를 등록하고, 새로운 프로미스를 반환

보통은 이렇게 함수에 감싸서 사용 할 수 있다.

// 프로미스 객체를 반환하는 함수 생성
function myPromise() {
  return new Promise((resolve, reject) => {
    if (/* 성공 조건 */) {
      resolve(/* 결과 값 */);
    } else {
      reject(/* 에러 값 */);
    }
  });
}

// 프로미스 객체를 반환하는 함수 사용
myPromise()
    .then((result) => {
      // 성공 시 실행할 콜백 함수
    })
    .catch((error) => {
      // 실패 시 실행할 콜백 함수
    });

프로미스 체이닝

• 값을 하나씩 넘겨 받으면서 +50 씩 되는걸 볼수있다.
• 이와 같이 여러개의 비동기 작업들을 순차적으로 수행할 수 있다.

const promiseSumPrac = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(100)
    }, 1000)
    
});

promiseSumPrac
    .then((num1) => {
        const result1 = num1 + 50
        return result1;
    })
    .then((num2) => {
        const result2 = num2 + 50
        return result2;
    })
    .then((num3) => {
        const result3 = num3 + 50
        return result3;
    })
    .then((num4) => {
        console.log(num4);  // 250 출력
    })

📌 Reference
참고자료