javascript fetch 사용법

회사에서 맨날 오래된 소스들만 보다보니,

아직도 axios 혹은 ajax를 사용하여 api 호출 하는 코드만 알고 있었더랬다.

최근 nomad corder 영상을 보다 보니

fetch 그리고 async await 가 나와 관련 내용에 대해 짧게 남겨본다.

1. 일반적인 get 방식

  const getMovies = async() => { // async를 통해 Promise를 반환하도록 처리
      const json = await ( // await 를 통해 비동기식으로 처리하는 처리결과를 모두 올때까지 대기
        await fetch ( -- java script 에 내장된 api 호출 함수
          `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
        )
      ).json();
      setMovies(json.data.movies);
      setLoading(false);
    }

2. fetch post 방식

fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`, {
  method: "POST", 
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ // POST 방식에서 전달할 Parameter 를 Body 부분에 세팅하여 전달 가능
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})