[JS] fetch 메소드로 API 호출하기

fetch()

• API를 호출하는데 사용되는 자바스크립트 내장 객체

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

• 첫 번째 인자로 API의 URL, 두 번째 인자로 옵션 객체를 받음
• 옵션 객체에는 HTTP 방식, HTTP 요청 헤더 등을 설정할 수 있음
• Promise 타입의 객체를 반환
  - API 호출 성공시(then)에는 응답(response)객체를 resolve하고
  - 실패했을 경우(catch)에는 예외(error) 객체를 reject함

 

API 호출 예제

const getData = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/comments")
      .then((res) => res.json());

    const initData = res.slice(0, 20).map((it) => {
      return {
        author: it.email,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++
      };
    });
    setData(initData);
  };
  
  
useEffect(() => {
    getData();
}, []);

fetch를 사용하여 API의 URL을 넣어주고, then으로 그 결과값을 json 메소드를 통해서 json 형식으로 받는다.

initData는 API로부터 얻은 데이터 중 20개만 슬라이싱하여 반환하고 map 함수를 통해 json으로부터 필요한 정보만 뽑아내 새로운 배열을 만들었다. useEffect를 사용하여 마운트 시 getData 함수가 실행되도록 해준다.

 

---