[Javascript] Promise와 Async / Await

Promise

우리가 API를 처리할 때나 fetch()로 데이터를 불러올 때,

비동기 작업을 하게 된다

 

그 때 Promise는 비동기 작업을 기반으로,

pending 상태에서 ~ 결과값인 resolve / reject를 가져온다

 

관련 메소드들로 동기 메소드처럼 값을 반환할 수 있고,

미래의 어떤 시점에 결과를 제공한다

 

const promiseVar = new Promise((resolve, reject) => (
  setTimeout(resolve, 3000, "Yes u r")
  // (handler, timeout, argument)
));

promiseVar
  .then(result => console.log(result))	// resolve 되면 실행
  .catch(error => console.log(error))	// reject 되면 실행
  .finally(() => console.log("I'm done"));	// 마지막에 실행

 

 

체이닝

promiseVar.then().then().then(). ...

 

각 then 에서의 return 값을 다음 then 인자로 넘겨준다

 

all()

Promise.all([p1, p2, p3, ...]);

 

모든 promise가 resolve 되면 resolve, 하나라도 reject 면 reject 한다
모든 프로세스가 작동하는지 확인할 때 유용하다 (서로 상관이 있을 때)

 

allSettled()

Promise.allSettled([p1, p2, p3, ...]);

 

.all과 달리 독립적으로 프로세스들의 resolve, reject를 확인할 수 있다

 

race()

Promise.race([p1, p2, p3]);

 

가장 빨리 resove / reject 되는 promise 실행함

 

---

Async Await

async 함수를 선언함으로써, 하나의 비동기 함수를 정의한다 (Promise의 업데이트)

이는 암시적으로 Promise를 사용하여 결과를 반환하지만,

.then()을 연속적으로 체이닝 할 필요 없이 간단한 구문을 가진다

 

// Promise 기본
const getMoviesPromise = () => {
  fetch("https://yts.mx/api/v2/list_movies.json")
  .then((response) => {
    console.log(response);
    return response.json();
  })
  .then((potato) => console.log(potato))
  .catch((e) => console.log(`✔${e}`));
};

// Async Await
const getMoviesAsync = async () => {
  try {
    const response = await fetch("https://yts.mx/api/v2/list_movies.json");
    console.log(response);
    const json = await response.json();
  }  catch (e) {
    console.log(`✔${e}`);
  } finally {
    console.log(json);
  }
};

getMoviesAsync();

 

await 식은 async 함수에서 실행을 일시 중지하고 전달된 Promise의 해결을 기다린 다음,

완료 후 값을 반환한다

이 await 식으로 인해 async 함수가 비동기적으로 완료된다

 

또한, 다음과 같이 async 함수 내에서

destructuring 과 await 를 이용해 병렬적으로 동작시킬 수 있다

 

try {
  const [moviesResponse, upcomingResponse] = await Promise.all([
    fetch("https://yts.mx/api/v2/list_movies.json"),
    fetch("https://yts.mx/api/v2/movie_suggestions.json?movie_id=100"),
  ]);

  const [movies, upcoming] = await Promise.all([
    moviesResponse.json(),
    upcomingResponse.json(),
  ]);

  console.log(movies, upcoming);
}

 

더불어 axios 라이브러리 또한 많이 사용하는데,

이는 위처럼 .json() 과 같이 따로 변환하지 않는다

즉, 모든 것을 json이나 text로 변경해 변환할 필요가 없다

 

---

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

async function - JavaScript | MDN

https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

6 Reasons Why JavaScript Async/Await Blows Promises Away (Tutorial) | Hacker Noon

Nomad Coders