[JavaScript] 프로미스(Promise)

Promise 기본

---

1. promise 객체 생성

let promise = new Promise(function (resolve, reject) {
  // new Promise에 전달되는 함수 : executor(실행자, 실행함수)
});

• resolve(value): 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
• reject(error): 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
• executor는 resolve나 reject 중 하나를 반드시 호출해야 한다.

 

2. 위의 pormise 객체의 내부 프로퍼티 살펴보기

출처: https://ko.javascript.info

• state : 처음엔 "pending" / resolve가 호출되면 "fulfilled" / reject가 호출되면 "rejected" 로 변한다.
• result : 처음엔 undefined / resolve(value)가 호출되면 value / reject(error)가 호출되면 error 로 변한다.

 

메서드 : then, catch, finally

---

1. then

promise.then(
  function (result) {
    /* 프라미스가 이행되었을 때 실행, 실행결과를 받는다.*/
  },
  function (error) {
    /* 프라미스가 거부되었을 때 실행, 에러를 받는다. */
  }
);

 

예시1. 성공적으로 이행된 프라미스

let promise = new Promise(function (resolve, reject) {
  setTimeout(() => resolve('done!'), 1000);
});

// resolve 함수는 .then의 첫 번째 함수(인수)를 실행.
promise.then(
  (result) => alert(result), // 1초 후 "done!"을 출력
  (error) => alert(error) // 실행되지 않음
);

 

예시2. 에러가 발생한 프라미스

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

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

 

2. catch

• 에러가 발생한 경우만 다루고 싶다면 .catch(errorHandlingFunction)를 사용한다.
• .then(null, errorHandlingFunction) 과 동일하게 작동한다..

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

promise.catch(alert); // 1초 뒤 "Error: 에러 발생!" 출력

 

3. finally

• .finally(f) 호출은 .then(f, f)과 유사하다.

new Promise((resolve, reject) => {
  /* 시간이 걸리는 어떤 일을 수행하고, 그 후 resolve, reject를 호출함 */
})
  // 성공·실패 여부와 상관없이 프라미스가 처리되면 실행됨
  .finally(() => 로딩 인디케이터 중지)
  .then(result => result와 err 보여줌 => error 보여줌)

 

Reference

• https://ko.javascript.info/