API 호출하기

누리·2022년 10월 16일
0

API호출

목록 보기
3/4

Fetch API란?

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있다.
Fetch에는 fetch(),Body, Headers, Request, Response 인터페이스가 존재한다.

fetch 사용법

fetch()는 2개의 매개변수를 받는데 첫번째는 URL이고 두번째는 Option이다. URL은 필수 매개변수이다. 그리고 ajax 통신이 성공하든 실패하든 Response로 분해할 수 있는 Promise를 리턴한다.

fetch(url, [options])

  • url : 접근하고자 하는 url
  • options : 선택 매개변수(method나 header 지정가능)
    • method : 사용할 메소드 선택 (GET/POST/PUT/DELETE)
    • headers : 헤더에 전달할 값 ({'content-Type' : 'application/json'})
    • body : 바디에 전달할 값 (JSON.stringify(data))
    • mode : 'cors'등의 값을 설정 (cors, no-cors, same-origin)
    • credentials : 자격증명을 위한 옵션 설정(include, same-origin, omit)
      (default : same-origin)
    • cache : 캐쉬 사용여부 (no-cache, reload, forc-cache, only-if-cached)

응답은 통상 2단계를 거쳐 진행된다
먼저 서버에서 응답 헤더를 받으면 fetch 호출 시 반환받은 Promise 객체가 fulfilled 상태가 되고 이때 Response 객체가 전달된다. Response의 ok 속성으로 작업의 성공 여부를 알게 되는데 만약 상태코드가 2XX 인 경우는 true이고 나머지는 false이다. 하지만 이 상태는 아직 본문(body)을 받지 않은 상태이다.

전달받은 Response 역시 Promise 인데 이 객체를 통해서 body 즉 실제 데이터를 받을 수 있다. 이때 사용되는 함수로는 body의 타입에 따라서 response.json(), response.text(), response.blob() 등이 있다.

.then chaining 예시

const url = "https://jsonplaceholder.typicode.com/posts/1";

const byFetch = () => {
  fetch(url)
    // 응답 처리 1단계: 상태만 파악 가능
    .then((response) => {
      if (!response.ok) {
        throw new Error(`오류 발생: ${response.status}`);
      }
      return response.json(); // 응답을 native js 객체로 변환
    })
    // 응답 처리 2단계: 실제 body 데이터 활용
    .then((data) => console.log(data))
    .catch((error) => console.error("fetch fail", error));
};

async await 예시

const byAsync = async () => {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`오류 발생: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("fetch fail", error);
    }
};

JSON Placeholder로 연습하기

profile
프론트엔드 개발자

0개의 댓글