[JS] ES6 Promise 쉽게 정리

nemo·2022년 1월 26일
0

JavaScript

목록 보기
6/22

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 안에서 실행하게 되면 판단이 완료될 때까지 브라우저가 멈추게 된다.

0개의 댓글