async/await로 API 호출 리팩터링(+모듈 분리)

오늘은 JavaScript에서 모듈 분리를 하면서 Promise 값을 다루는 과정에서 겪었던 문제를 해결했다. 특히, async/await로 리팩터링 과정에 집중을 해보았다.

1. 문제 상황

초기 코드

처음엔 then()을 활용해서 Promise를 처리했는데 이렇게 하면 then() 내부에서만 값을 사용할 수 있었다. 모듈로 코드를 분리했기 때문에 함수 외부에서도 Promise 결과를 사용하려면 async/await를 적용해야 했다.

---

2.async/await로 리팩터링

처음 작성한 코드는 아래와 같다.

async function getMoviesAPI() {
  const response = await fetch("https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1",
      options);
  const data = await response.json();
  console.log(data);
  return data;
}

const movies = getMoviesAPI();
console.log(movies);

getMoviesAPI() 함수 내부에서는 data가 잘 출력되는 걸 확인했다. 하지만, 코드를 실행하면 movies에 Promise가 담겨서 원하는 데이터에 접근할 수 없었다.

그래서 getMoviesAPI() 호출 앞에 await를 붙였다..!

const movies = await getMoviesAPI();
console.log(movies);

그랬더니 콘솔창에 에러가 뜨기 시작했다.

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

---

3. 해결 과정

에러 메시지를 통해 await는 async 함수 내부에서만 유효하거나 모듈로 선언된 파일에서만 사용가능하다는 걸 알게 됐다. 나는 어차피 모듈 분리가 목적이었기 때문에 코드를 수정하고 export를 해주었다.

async function getMoviesAPI() {
  try {
    const response = await fetch(
      "https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1",
      options
    );

    if (!response.ok) {
      throw new Error("에러 발생!!");
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("에러 발생!!!");
  }
}

const fetchMovies = await getMoviesAPI();

export { fetchMovies };

코드를 수정하고 app.js에서 import하고 출력해보았다.

import { fetchMovies } from "./api.js";

console.log(fetchMovies);

여전히 에러가 떠서 찾아보니까 html에서 script를 불러올 때 type="module"을 추가해야 한다. 그래서 HTML에서 type="module"을 추가해주었다.

<script type="module" src="app.js"></script>

최종적으로 내가 원하는 결과가 출력되었다!

튜터님께서 알려주신 또 다른 방법도 있다. 함수 외부에서 선언을 미리 하고 내부에서 할당하여 그 값을 export하는 방식이다.

4. 느낀점

1. await는 async 함수 안에서만 유효하다.
2. HTML에서 script를 로드할 때 모듈로 사용하려면 type="module"을 추가해야 한다.
3. 리팩터링하니까 ui를 처리하는 javascript코드가 훨씬 간결해졌다..!!

참고문헌
[React/JavaScript] Promise 값 가져오기