async/await이 나온 이유는?

• then의 문제점을 해결하기 위해 ASYNC, AWAIT이 나왔다.

  ※ promise에서의 then
  https://velog.io/@tree0787/Promises

• then의 문제점은 chasing promise와 같이 then을 여러 번 사용하거나, then 사용 시 함수 호출을 여러 번 하는 경우 발생한다.
• 한마디로 코드가 복잡해 보인다.
• 아래 코드는 then과 async/await을 비교한 코드이다. 같은 결과가 나오지만 async/await을 사용한 코드가 훨씬 더 간결해 보인다.

    // then을 사용한 코드
    const getMoviesPromise = () => {
        fetch("https://yts.mx/api/v2/list_movies.json")
        .then((response) => {
        return response.json();
        })
        .then((potato) => console.log(potato))
        .catch((e) => console.log(`✔${e}`));
    };

    getMoviesPromise ()

    // async/await을 사용한 코드
    const getMoviesAsync = async () => {
        try {
            const response = await fetch("https://yts.mx/api/v2/list_movies.json");
            const json = await response.json();
            console.log(json);
        } catch(e){
            console.log(`${e}`);
        }};

    getMoviesAsync()

finally

• 아래 코드는 finally를 사용한 예시

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

  };
  getMoviesAsync()

Promise.all

• 아래 코드는 promise.all을 사용한 예시

  const getMoviesAsync = async () => {
      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);
      } catch (e) {
          console.log(e);
      } finally {
          console.log("we are done");
      }
      };

  getMoviesAsync();