스파르타코딩 TIL Promise 이해하기

promise 이해하기

promise는 왜 필요할까요?

주로 서버에서 받아온 데이터를 화면에 표시할 때 사용을 한다.
일반적으로는 웹 애플리케이션 을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용한다.

$.get("url주소/products/1", function (response) {});
api가 실행되면 데이터 하나 보내주세요 라는 요청을 보낸다
but 여기서 데이터를 다 받기도 전에, 마치 데이터를 받아온 것 처럼 화면에 데이터를 표시하려고 
하면 오류가 발생하거나 빈 화면이 뜬다.

promise 동작원리는 살펴보자

먼저 ajax통신 API를 이용하여 1번 상품을 받아오는 코드이다.
콜백함수를 사용해봤다.

function getData(callbackfunc) {
  $.get("url주소/products/1", function (response) {
    callbackfunc(response); 
    // 서버에서 받은 데이터 response를 callbackfunc함수에 넘겨줌
  });
}

getData(function (tableData) {
  console.log(tableData);
  //$.get함수의 response 값이 tableData로 넘어옴
});

프로미스 코드를 적용해서 살펴보자

function getData(callback){
  return new Promise(function(resolve, reject){
    $.get('url 주소 / products / 1 '), function(response){
      // 데이터를 받으면 resolve() 호출
      resolve(response)
    }
  })
}
// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tabledata){
  // reseolve()의 결과 값이 여기 위로 전달됨
  console.log(tabledata)
  // $.get()의 response 값이 TableData에 전달됨
})

프로미스의 3가지 상태

• pending : 대기, 비동기 처리 로직이 아직 완료되지 않음
• fulfilled : 이행, 비동기 처리가 완료되어, 프로미스 결과 값을 반환해준 상태
• rejected : 실패, 비동기 처리가 실패하거나 오류가 발생한 상태