Promise

Promise

• 비동기를 돕는 객체로 비동기처리의 결과값을 핸들링 할 수 있음
• 서버에서 받아온 데이터를 화면에 표시할 때 데이터를 받아오고나서 보여줘야 하기 때문에
  ( 받아오기전에 이후 코드들이 먼저 실행되면 오류가 나니까 )

프로미스의 3가지 상태

• Pending(대기상태) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(성공) : 비동기 작업이 정상적으로 처리된 상태 (resolve)
• Rejected(실패) : 비동기 작업이 실패된 상태 (reject)

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) => {
    // executor = 실행자함수
    setTimeout(() => {
      if(typeof number === 'number') {
        //성공 -> resolve
        resolve(number >=0 ? '양수' : '음수')
      } else {
        //실패 -> reject
        reject('주어진 값이 숫자형 값이 아닙니다');
      }
    }, 2000)
  }
  const asyncTask = new Promis(executor);
  return asyncTask;
  //executor로 실행하여 나온 값을 asyncTask에 담아서 리턴시킴
}

const res = isPositiveP(101);

res
  .then((rex)=>{console.log('작업성공 : ', res)})
  .catch((err)=>{console.log('작업실패 : ', err)})

프로미스의 생성 : new Promise();
콜백함수 선언 시 인자 : resolve, reject
resolve는 then()으로 받고, reject는 catch()로 받음

콜백지옥을 promise로 바꿔주면??

• then체이닝을 사용하여 보기좋게 바꿀 수 있음

  taskA(5, 1)
    .then((a_res) => {return taskB(a_res)})
    .then((b_res) => {return taskC(b_res)})
    .then((c_res) => {console.log(c_res)})

• 더 직관적인 방법이 있음 (async & await)

---

공부하며 정리&기록하는 ._. 씅로그