[JS] Promise, async, await

 

 

Promise

- state

1. pending(대기): 이행하지도, 거부하지도 않은 초기 상태
2. fulfilled(이행): 연산이 성공적으로 완료
3. rejected(거부): 연산이 실패

- then 메서드에 의해 대기열(큐)에 추가된 처리 호출

- result: undefined/resolve/reject

 

 

const pr = new Promise((resolve, reject) => { // new Promise(callback(성공,실패))
// 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출
  console.log("pr start");
  setTimeout(() => {
    //resolve("OK");
    reject(new Error("new error..."));
  }, 1000);
});

pr.then((result) => {
  console.log(result);
})
  .catch((err) => { // error 처리
    console.log(err);
  })
  .finally(() => {
    console.log("end");
  });

const f1 = () => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      console.log("pc start");
      res("1st order complete");
    }, 2000);
  });
};
const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("2nd order fail");
    }, 1000);
  });
};
const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3rd order complete");
    }, 1000);
  });
};

// promise chaining 프로미스 체이닝 -> reject -> finally
f1()
  .then((res) => f2(res))
  .then((res) => f3(res))
  .then((res) => console.log(res))
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    console.log("fin");
  });

//Promise.all(배열).then(function) -> reject -> 모두 실패
Promise.all([f1(), f2(), f3()]).then((res) => {
  console.log(res);
});

* resolve, reject가 실행되어야 promise 처리 완료

 

Promise 메서드

Promise.all(배열)	모든 작업이 성공해야 성공, 하나라도 reject면 모두 실패
Promise.race(배열)	1개 작업이 처리(settled)되면 종료, 1등만 실행
Promise.allSettled(배열)	모든 프로미스의 각각의 상태와 값(거부 사유)을 모아놓은 배열로 반환
Promise.any(배열)	주어진 모든 프로미스 중 하나라도 성공(fulfilled)하면 종료

 

 

async

- Promise를 반환 -> Promise 사용법과 같음

- return 값이 결과값

- then 사용 가능

 

await

- async 함수 실행을 일시 중지하고 Promise가 처리될 때까지 대기

function delayP(sec) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(new Date().toISOString());
    }, sec * 1000);
  });
}

function myFunc() {
  return 'func';
}

async function myAsync() {
  const result = await delayP(2).then((time) => {
    return 'x';
  });
  console.log(result);
  return 'async';
}

console.log(myFunc());
console.log(myAsync());

myAsync().then((result) => {
  console.log(result);
});