JavaScript - async / await 숙제

이번주에 제출했었던 숙제코드를 다시 확인해보다가 async / await 을 제대로 활용하지 못한 것 같아서 다시 둘러보았다.

---

코드 설명

일단,

class HttpError extends Error {
  constructor(response) {
    super(`${response.status} for ${response.url}`);
    this.name = "HttpError";
    this.response = response;
  }
}

function loadJson(url) {
  return new Promise(function (resolve, reject) {
    fetch(url).then((response) => {
      if (response.status == 200) {
        console.log(response);
        resolve(response.json());
      } else {
        console.log(new HttpError(response));
        reject(new HttpError(response));
      }
    });
  });
}

이렇게 HttpError를 잡은 경우 어떤 Error인지 확인하기 위한 클래스 선언과 외부 API의 Json을 불러오는 기능을 Promise로 return 받는 함수로 선언했다.

---

기존 코드

여기서 기존 제출했던 코드는

async function koreanMovie() {
  return await loadJson(`https://klassic-quote-api.mooo.com/v1/random-quote`)
    .then((res) => {
      alert(`${res.author}: ${res.quote}`);
      return res;
    })
    .catch((err) => {
      if (err instanceof HttpError && err.response.status == 404) {
        alert("무언가 에러가 발생했군요!");
        return;
      } else {
        throw err;
      }
    });
}

async function awaitKoreaMovie() {
  await koreanMovie();
  console.log('첫번째 실행완료');
  await koreanMovie();
  console.log('두번째 실행완료');
}

awaitKoreaMovie()

이런식으로 새로운 async 함수를 만들어 거기서 koreanMovie()가 return될 때까지 기다리도록 했는데..

이렇게 해버리면 사실 promise를 반환하는 loadJson은 koreanMovie()에서 하는건데.. 여기서 await을 주어도 의미가 없다는 사실을 깨달았다..

그래서 koreanMovie()에 직접 await을 넣어주는 방식이 async / await 을 활용한 예시라고 보았다.

---

변경 코드

async function koreanMovie() {
  const _awaitKoreanMovie = await loadJson(`https://klassic-quote-api.mooo.com/v1/random-quote`)
    .then((res) => {
      alert(`${res.author}: ${res.quote}`);
      return res;
    })
    .catch((err) => {
      if (err instanceof HttpError && err.response.status == 404) {
        alert("무언가 에러가 발생했군요!");
        return;
      } else {
        throw err;
      }
    });
}

koreanMovie();
koreanMovie();

loadJson(url) 함수에 await을 넣어 resolve, reject를 받아내고 그거에 따른 then, catch로 나누어 로직을 수행하도록 해주었다.

_awaitKoreanMovie에 return 받은 값에 따라서 then(성공), catch(실패)가 나누어진다.

결과는 loadJson 함수를 순차적으로 호출하는 것을 볼 수 있었다.