[javascript] 비동기 작업 / Promise

Promise 란???

 

Promise는 비동기 처리를 위해 사용되는 하나의 객체이다.

콜백 함수를 사용하여 비동기 작업을 처리할 때 콜백 지옥(CallBack Hell)으로 인한 단점을 보완할 수 있다.

 

 

Promise 생성

 

 

Promise는 ES6에서 새롭게 도입한 객체이므로, 생성자를 통해 인스턴스화 한다.

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {	//pending(대기) 상태
  // 비동기 작업을 수행한다.

  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');	//fulfilled(이행) 상태
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');	//rejected(실패) 상태
  }
});

 

 

Promise 상태(states)

 

 

 

pending(대기)	비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행)	비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패)	비동기 처리가 실패하거나 오류가 발생한 상태

 

 

CallBack 함수와 Promise 비교

 

 

CallBack 함수

function isPositive(number, resolve, reject) {
  setTimeout(() => {
    if (typeof number === "number") {
      //성공 -> resolve
      resolve(number >= 0 ? "양수" : "음수");
    } else {
      //실패 -> reject
      reject("주어진 값이 숫자형 값이 아닙니다.");
    }
  }, 2000);
}

isPositive(
  10,
  (res) => {
    console.log("성공적으로 수행했음", res);
  },
  (err) => {
    console.log("실패 하였음 : ", err);
  }
);

 

Promise 객체

function isPositiveP(number) {
  const executor = (resolve, reject) => {
    setTimeout(() => {
      if (typeof number === "number") {
        //성공 -> resolve
        console.log(number);
        resolve(number >= 0 ? "양수" : "음수");
      } else {
        //실패 -> reject
        reject("주어진 값이 숫자형 값이 아닙니다.");
      }
    }, 2000);
  };

  return new Promise(executor);
}

isPositiveP(10)
  .then((res) => {
    console.log("작업 성공 : ", res);
  })
  .catch((err) => {
    console.log("작업 실패 : ", err);
  });

 

 

 

CallBack 함수를 Promise 객체를 이용하여 변경하기!

 

 

CallBack 함수 

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 2000);
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 3000);
}

taskA(1, 2, (res_a) => {
  taskB(res_a, (res_b) => {
    taskC(res_b, (res_c) => {
      console.log("taskC Result : ", res_c);
    });
  });
});

 

Promise 객체

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 2000);
  });
}

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * 2;
      resolve(res);
    }, 1000);
  });
}

function taskC(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * -1;
      resolve(res);
    }, 3000);
  });
}

taskA(1, 2)
  .then((res_a) => {
    return taskB(res_a);
  })
  .then((res_b) => {
    return taskC(res_b);
  })
  .then((res_c) => {
    console.log("taskC Result : ", res_c);
  });

 

Promise를 사용하면 콜백 지옥(CallBack Hell)을 벗어날 수 있다.

 

 

참고

 

 

https://espania.tistory.com/339

[javascript] 비동기 작업 / Call Back 함수란 무엇인가??

https://espania.tistory.com/340

[javascript] 비동기 작업 / 콜백 지옥(CallBackHell)