Promise

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

Pending(대기 상태) : 현재 비동기 상태가 진행 중이거나 진행 할 수 없는 문제가 생겼을 때

Fulfilled(성공, 이행) : 비동기 작업이 의도한대로 이행이 되었을 때 상태

Rejected(실패) : 비동기 작업이 모종의 이유로 실패했을 때의 상태 / 취소 되는 경우도 포함

 

성공하거나 실패하면 그대로 작업이 끝남.

 

resolve 가 되었을 때

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

isPositive(10, (res) => {
  console.log("성공적으로 수행됨", res); // 성공적으로 수행됨 양수 __console_feed_remaining__0 
}, (err) => {
  console.log("실패하였음", err);
}
);

실패 : Rejected

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

isPositive([], (res) => {
  console.log("성공적으로 수행됨", res);
}, (err) => {
  console.log("실패하였음", err); // 실패하였음 주어진 값이 숫자형 값이 아닙니다. __console_feed_remaining__0 
}
);

Promise 비동기 처리 방식

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

function isPositiveP(number) {
  const executor = (resolve, reject) => { // executor 실행자
    setTimeout(() => {
      if(typeof number === 'number') {
        // 성공 -> resolve
        console.log(number); //101 "__console_feed_remaining__0" 
        resolve(number >= 0 ? '양수' : '음수')
      } else {
        // 실패 -> reject
        reject("주어진 값이 숫자형 값이 아닙니다.")
      }
    }, 2000)
  };
  
  const asyncTask = new Promise(executor);
  return asyncTask;
}

isPositiveP(101);

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

function isPositiveP(number) {
  const executor = (resolve, reject) => { // executor 실행자
    setTimeout(() => {
      if(typeof number === 'number') {
        // 성공 -> resolve
        console.log(number); 
        resolve(number >= 0 ? '양수' : '음수')
      } else {
        // 실패 -> reject
        reject("주어진 값이 숫자형 값이 아닙니다.")
      }
    }, 2000)
  };
  
  const asyncTask = new Promise(executor);
  return asyncTask;
}

const res = isPositiveP(101);

res.then((res) => {
  console.log("작업성공 : ", res); // 작업성공 :  양수 __console_feed_remaining__0 
})
.catch((err) => {
  console.log("작업실패 : ", err);
});

then-resolve, catch-reject

 

catch 실행

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

function isPositiveP(number) {
  const executor = (resolve, reject) => { // executor 실행자
    setTimeout(() => {
      if(typeof number === 'number') {
        // 성공 -> resolve
        console.log(number); 
        resolve(number >= 0 ? '양수' : '음수')
      } else {
        // 실패 -> reject
        reject("주어진 값이 숫자형 값이 아닙니다.")
      }
    }, 2000)
  };
  
  const asyncTask = new Promise(executor);
  return asyncTask;
}

const res = isPositiveP([]);

res.then((res) => {
  console.log("작업성공 : ", res); // 
})
.catch((err) => {
  console.log("작업실패 : ", err); // 작업실패 :  주어진 값이 숫자형 값이 아닙니다. __console_feed_remaining__0 
});

 

Promise 예제

 

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

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


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

taskA(5, 1).then((a_res) => {
  console.log("A Result : ", a_res); // A Result : 6
  taskB(a_res).then((b_res) => {
    console.log("B Result : ", b_res); // B Result :  12
    taskC(b_res).then((c_res) => {
      console.log("C Result : ", c_res); // C Result :  -12
    })
  })
})

위와 같은 방식은 콜백함수 식으로 사용한거여서 아래 코드로 사용하길 바란다.

가독성과 코드의 깔끔함은 아래 코드가 훨씬 낫다.

 

promise

.then 체이닝

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

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


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

taskA(5, 1).then((a_res) => {
  console.log("A Result : ", a_res); // A Result : 6
  return taskB(a_res);
}).then((b_res) => {
  console.log("B Result : ", b_res); // B Result :  12
  return taskC(b_res);
}).then((c_res) => {
  console.log("C Result : ", c_res); // C Result :  -12
});