자바스크립트의 비동기 처리 방식 - Promise

자바스크립트의 비동기 처리 방식 중 하나, Promise

• 비동기 처리를 위한 방식 중 하나
• 가독성이 좋지 않은 콜백 함수(함수가 또 다른 함수를 계속 호출해야만 하는 경우를 콜백 지옥이라고 부른다)를 대신하여 사용될 수 있다.
• 에러 처리에 용이하다.
• 또 다른 비동기 처리 방식인 async & await를 더 자주 사용하긴하나, promise의 정적메소드인 Promise.all과 Promise.race등은 유용하게 사용될 수 있다. (다음 포스팅)

---

💫promise객체 생성하기💫

let promise = new Promise(function(resolve, reject) {
  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

resolve와 reject : 자바스크립트에서 자체 제공하는 콜백, 개발자 임의 변경 X, 둘 중 하나는 반드시 호출해야함
resolve(value) : 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출, 호출되면 state의 상태가 "pending(보류)" ➡️ "fulfilled(수행됨)"
reject(error) : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출, state의 상태가 "pending(보류)" ➡️ "rejected"

---

💫 resolve 또는 reject는 한 번만 수행, 이후 무시💫

let promise = new Promise(function(resolve, reject) {
  resolve("완료");
  reject(new Error("…")); // 무시됨
  setTimeout(() => resolve("…")); // 무시됨
});

resolve가 "완료"라는 인수 값을 가진 뒤, 이후의 인수는 무시된다.

---

💫메서드 (then, catch, finally)

• then

promise.then(
  function(result) { /* 프로미스가 이행되었을 때(fullfilled)*/},
  function(error) { /* 프로미스가 거부되었을 때(rejected) */ }
);

.then의 첫 번째 인수는 resolve()가 호출되어 프로미스가 fullfilled 되었을 때 실행되는 함수를 전달하면 되고,
두 번째 인수는 reject()가 호출되어 프로미스가 rejected 되었을 때 실행될 함수를 전달하면 된다.
.then에 인수를 하나만 전달한다면, 성공적으로 fullfilled된 경우만 다룰 수 있다.

---

• then & catch

위의 경우처럼 에러처리를 위해 then 메서드에 두 번째 콜백 함수를 전달하는 것보다, catch 메서드를 사용하는 것이 가독성이 좋으므로 자주 사용된다.

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// reject 함수는 .then의 두 번째 함수를 실행
promise.then(
  result => alert(result), // 실행 X
  error => alert(error) // 1초 후 "Error: 에러 발생!"을 출력
);

🔼 .then만을 이용한 에러 처리

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

promise
  .then(result => alert(result)) // 실행 X
  .catch(error => alert(error));
// 1초 후 "Error: 에러 발생!"을 출력

🔼.then & .catch를 이용한 에러 처리

이처럼 catch 메서드를 모든 then 메서드를 호출한 이후에 호출하면 비동기 처리에서 발생한 에러(reject 함수가 호출된 상태)뿐만 아니라 / then 메서드 내부에서 발생한 에러까지 모두 캐치할 수 있다.

---

• finally

성공 or 에러 여부와 상관 없이 프로미스가 처리되면 무조건 실행
쓸모가 없어진 로딩 인디케이터(loading indicator)를 멈추는 경우 사용될 수 있음

▶️ resolve 호출되었을 때

 let promise = new Promise(function (resolve, reject) {
    setTimeout(() => resolve("완료!"), 1000);
  });

  promise
    .then((result) => console.log(result)) 
// 1초 후 "완료!"를 출력
    .catch((error) => console.log(error))
    .finally(() => console.log("결과에 상관없이 호출"));
// 이어 "결과에 상관없이 호출" 출력

---

▶️ reject 호출되었을 때

let promise = new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error("에러 발생!")), 1000);
  });

  promise
    .then((result) => console.log(result))
    // 실행 X
    .catch((error) => console.log(error))// 1초 후 에러 출력
    .finally(() => console.log("결과에 상관없이 호출"));
  // 이어 "결과에 상관없이 호출" 출력

---

💫출처 & 참고문헌💫

https://poiemaweb.com/es6-promise

• 1-6 chapter 참조
• chapter 7 프로미스의 정적 메소드(Promise.race / Promise.all 등)도 공부해보면 좋을 것 같다!

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

• promise 기본 문법, 개념, 예제 참조