Async-await

Heewon👩🏻‍💻·2024년 5월 7일

Api를 calling할때 요즘 보편적으로 사용하는건 fetch, then 대신 async-await를 많이 사용한다. 아래 두 코드를 비교해보자.

[코드1] fetch 와 then을 사용한 함수!

useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    )
      .then((response) => response.json())
      .then((json) => {
        setMovies(json.data.movies);
        setLoading(false);
      });
  }, []);

[코드2] async 와 await를 사용한 함수!

  const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);

[코드2]를 더 짧게 수정 가능. await 김밥임

const json = await (await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`)
   ).json();

둘다 기능은 같고 코드가 틀려진거닌까 쫄거 없음..
본인에게 사용하기 편리한걸로 사용하면 됨.

profile
Interested in coding, meat lover, in love with dogs , enjoying everything happens in my life.

0개의 댓글