IM 29일차 TIL(promise)

Promise

 

프로미스(Promise)란 자바스크립트 비동기 처리에 사용되는 객체로 어떤 코드를 실행이 완료되기 전에 다음 코드를 수행되는 특성이다.

 

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시하기 위해 사용된다.

 

 

프로미스는 3가지 특징을 가진다.

 

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

---

pending(대기)는 new Promise() 를 호출하게 되면 대기 상태가 된다.

 

new Promise(function(res, rej){

});

 콜백 함수로는 resolve, reject를 받는다.

 

---

fulfilled(이행)은 resolve를 받아 호출하는 것이다.

new Promise(function(res, rej) {
  res()
}

////////////////////////////////////////////////////

function getData() {
  return new Promise(function(res, rej) {
    var data = 10;
    res(data);
  });
}


getData().then(function(Data) {
  console.log(data); // 10
});

.then() 을 통해서 res값을 받아올 수 있다.

 

---

rejected(실패)는 reject를 받아 호출할때 발생한다.

new Promise(function(res, rej) {
    rej(new Error("error"));
  });

///////////////////////////////////////////////////////

function getData() {
  return new Promise(function(res, rej) {
    rej(new Error("error"));
  });
}

getData().then().catch(function(err) {
  console.log(err); // Error: error
});

실패에 대한 이유를 .catch()로 받아올 수 있다.

 

---

Promise chaining

 

프로미스를 연결해서 사용하는 것을 의미하며 ,  .then() 을 통해 호출할 수 있다.

 

function getData() {
  return new Promise({
    
  });
}

getData()
  .then(function(data) {
    
  })
  .then(function() {
    
  })
  .then(function() {
    
  });

 

위와 같은 형식으로 프로미스를 연결하여 계속해서 호출 값을 받아낼 수 있다.

 

비동기를 처리하기 위해서 프로미스를 사용하는 것이 유용하다.

 

프로미스 외에 비동기를 처리하기 위해 acync & await 가 최근 문법으로 등장하였고, 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성하도록 도와주기도 한다.