자바스크립트 Promise

OUO·2022년 3월 21일
0
post-thumbnail

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

👉대기 상태(pending)---해결(resolve)--->성공(fulfilled)
👉대기 상태(pending)---거부(reject)--->실패(rejected)

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) => {
    // 실행자, 비동기작업을 실행 시켜주는 함수
    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);
  });

❗ Promise 객체를 반환 = 비동기적으로 동작, 반환한 promise 객체를 이용해서 반환한 결과값을 then, 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 RESULT :", a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log("B RESULT :", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("C RESULT :", c_res);
  });

// taskA(3, 4, (a_res) => {
//   console.log("task A :", a_res);
//   taskB(a_res, (b_res) => {
//     console.log("task B :", b_res);
//     taskC(b_res, (c_res) => {
//       console.log("taskC :", c_res);
//     });
//   });
// });

👍 비동기처리를 호출하는 코드와 결과를 처리하는 코드를 분리 가능
콜백 함수를 피하고 가독성 있고 깔끔한 비동기식 처리 가능

profile
develoops!er

0개의 댓글