[JS] ES6 Promise 쉽게 정리

Promise는 비동기의 성공과 실패를 판단하여 처리한다.
예를 들어 Ajax 요청을 통해 서버의 데이터를 갖고올 경우 정상적으로 동작했으면 성공, 에러가 나면 실패로 판정해준다.

Promise 기본 형태

let myPromise = new Promise((resolve, reject) => {
  ...
  resolve("성공!");
})

myPromise.then(() => {
  // myPromise가 성공할 경우 실행할 코드
}).catch(() => {
  // myPromise가 실패할 경우 실행할 코드
});

resolve() 함수를 반환하면 성공으로 판정되며, reject() 함수를 반환하면 실패로 판정된다. 파라미터에 담긴 resolve와 reject는 마음 대로 작명해도 된다.

resolve()

let myPromise = new Promise((resolve, reject) => {
  resolve("성공!"); // 무조건 성공 판정
})

myPromise.then(() => {
  // myPromise가 무조건 성공으로 판정되기 때문에 then 함수만 실행된다.
  console.log("성공했습니다.");
}).catch(() => {
  
});

reject()

let myPromise = new Promise((resolve, reject) => {
  reject("실패!"); // 무조건 실패 판정
})

myPromise.then(() => {
  
}).catch(() => {
  // myPromise가 실패로 판정되어 catch 함수가 실행된다.
  console.log("실패했습니다.");
});

사용 예제

success 함수에 들어온 "성공!"이라는 텍스트는 then 함수의 파라미터로 들어간다.

let myPromise = new Promise((success, fail) => {
  setTimeout(() => {
    success("성공!");
  }, 1000)
})

myPromise.then((successMessage) => {
  console.log(successMessage); // "성공!"
}).catch(() => {
  console.log("실패!");
});

⚠️주의점⚠️

Promise는 비동기 콜백 함수와 유사한 형태이지만 동기적으로 실행된다. 따라서, 엄청 오래 걸리는 작업을 Promise 안에서 실행하게 되면 판단이 완료될 때까지 브라우저가 멈추게 된다.