async, await

fetch

일단 fetch부터 살펴봐야 합니다.

 

fetch("url")을 넣으면 요청을 보냅니다.

response을 fetch().then()으로 다룰 수 있습니다.

 

useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
}, []);

then()안에 () => {} 형태로 람다 함수를 집어넣을 수 있는거 같습니다.

then()을 대채하려는게 async, await인듯 합니다. 비동기 처리및 콜백함수라고 하는데 요청이 들어왔을 때 실행된다! 라는 함수입니다.

fetch로 문자들이 response에 들어오면 json()으로 변환해라!
json이 들어오면 setCoins()에 json을 넣고 setLoading(false)를 실행시켜라!

then이 주는 의미는 이거 입니다.

 

async, await

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

만약 async, await를 사용하면 

async는 예약어 입니다.

await는 비동기 처리 메서드 입니다. 반드시 객체를 반환해야 합니다.

비동기 호출(async)이 들어오면 await를 실행해주세요~
그리고 await 너는 프로미스 객체(자바스크립트 비동기 처리를 위한 객체)를 반환해줘~

 

참고자료

https://joshua1988.github.io/web-development/javascript/js-async-await/