[ JS ] Promise

Promise ? 

프로미스는 비동기 작업을 편리하게 처리할 수 있도록 ES6부터 도입된 기능입니다.

즉, 자바스크립트 비동기 처리에 사용되는 객체입니다.

프로미스 도입 이전에 콜백 함수로 비동기 처리를 하면 Callback Hell을 직면했습니다.

이러한 문제점을 Promise를 사용함으로써 해결할 수 있습니다.

 

- Callback Hell 

const printNumber = (number, cb) => {
  setTimeout(() => {
    console.log(number);

    if (cb) {
      cb(number + 1);
    }
  }, 1000);
};

printNumber(1, (number) => {
  printNumber(number, (number) => {
    printNumber(number, (number) => {
      console.log("end");
    });
  });
});

- Promise

const printNumberPromise = (number) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const increase = number + 1;
      console.log(increase);
      resolve(increase);
    }, 1000);
  });
};

printNumberPromise(0)
  .then((n) => printNumberPromise(n))
  .then((n) => printNumberPromise(n))
  .then((n) => printNumberPromise(n));

 

---

Promise 특징

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

위 코드로 Promise 객체를 생성할 수 있습니다.

 

- new Promise 생성할 때 전달하는 함수

1.  new Promise가 생성될 때 자동으로 실행됩니다.

2. 인수로 resolve, reject 받습니다. 이는 자바스크립트에서 자체 제공하는 콜백입니다. 

3. 결과에 따라 인수로 넘겨준 resolve, reject 둘 중 하나는 반드시 호출합니다.

- Promise의 상태

1. Pending : 비동기 처리가 아직 완료되지 않은 상태

2. Fulfilled : 비동기 처리가 완료되어 결과값을 반환한 상태

3. Rejected : 비동기 처리가 실패 또는 오류가 발생한 상태

new Promise 생성할 때 전달한 함수는 Promise의 상태를 둘 중(fulfilled, rejected) 하나로 변화시킵니다. 

resolve가 호출되면 promise의 상태는 fullfiled로 변합니다.

reject가 호출되면 promise의 상태는 rejected로 변합니다.

 

- Promise 후속 처리 메서드

1. then : 첫 번째 인수는 프라미스가 이행되었을 때 실행되는 함수

new Promise((resolve, reject) => {
  setTimeout(() => resolve("결과"), 2000);
})
  .then((result) => console.log(result));

2. catch : 에러 핸들링하는 함수

new Promise((resolve, reject) => {
  throw new Error("에러 발생!");
})
  .catch(err => alert(err));

3. finally : 성공 실패 여부 상관 없이 실행되는 함수

 

 

 

 

 

 

link 🔗 : https://ko.javascript.info/promise-basics

link 🔗 : https://www.youtube.com/watch?v=Sn0ublt7CWM&t=0s 

link 🔗 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

link 🔗 : https://inpa.tistory.com/entry/JS-📚-비동기처리-Promise