Promise

Beom·2023년 1월 3일
0

자바스크립트 101

목록 보기
8/9

비동기를 돕는 객체
비동기 처리에 콜백을 넘겨줄 필요가 없다


비동기 작업이 가질 수 있는 3가지 상태

  1. pending (대기 상태) - 현재 작업이 진행중 or 시작도 못하는 상태
    pending - resolve (해결) - fulfilled
  2. fulfilled (성공) - 비동기 작업이 정상적으로 완료 됨
    pending - reject (거부) - rejected
  3. rejected (실패) - 어떠한 이유로 실패함

ex) 콜백을 통해서 비동기 처리하기

function isPositive(number){
	setTimeout(() => {
		if(typeof number === 'number'){
			//성공 -> resolve
            resolve(number >= 0 ? "양수" : "음수");
		} else{
			//실패 -> reject
            reject('주어진 값이 숫자형 값이 아닙니다');
        }
	}, 2000);
}

isPositive(
	10,
	(res)=>{
    	console.log('성공적으로 수행함 : ', res
     },
     (err)=>{
     	console.log('실패함:', err)
     }
);

성공적으로 수행함 : 양수


function isPositiveP(number) {
	//비동기 작업을 실행하는 함수 = executor
	const executor = (resolve, reject) => {
    	setTimeout(() => {
       		if(typeof number === 'number'){
				//성공 -> resolve
          	  resolve(number >= 0 ? "양수" : "음수");
			 } else{
				//실패 -> reject
         	   reject('주어진 값이 숫자형 값이 아닙니다');
        	 }
     	}, 2000);
	};
    //isPositiveP에서 executor 실행하기
    //비동기작업 자체인 프라미스를 저장할 상수를 만들고 new 키워드로 프라미스 객체를 생성(실질적인 실행자 함수 executor 을 넘겨줌)
    const asyncTask = new Promise(executor)
    return asyncTask;
    //isPositiveP의 반환값이 Promise로 변함
}

const res = isPositiveP(101);
//res라는 상수가 반환받은 promise 객체를 통해서 resolve/reject의 결과값을 아무데서나 사용 가능

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

작업 성공 : 양수
resolve에서 전달한 양수라는 값이 콜백함수에 들어온 것을 확인 가능
reject -> catch에서 받을 수 있음

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 3000);
  });
}

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * 2;
      resolve(res);
    }, 1000);
  });
}

function taskC(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * -1;
      resolve(res);
    }, 2000);
  });
}

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

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

0개의 댓글