[Javascript] fetch

fetch에 대해서는 몇번 접한적이 있었고 이번에 axios를 접하게되어

이전에 접했던 fetch에 대해 다시 정리해보기로 했다.

 

fetch()

fetch()를 호출하면 브라우저는 네트워크요청을 보내서 프라미스 타입의 객체를 반환한다.

 

fetch 기본 사용법

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

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션의 객체를 받으며
promise타입의 객체를 반환한다.

 

url : 접근하고자 하는 URL
options : 선택 매개변수, method나 header, body 등을 받을 수 있음
options에 아무것도 전달하지 않으면 get method로 진행된다.

 

  fetch(url).then((response) =>
    console.log(response)
    );

응답받은 Response의 property들을 살펴보면 HTTP상태를 확인할 수 있다.

 

status – HTTP 상태 코드
ok – HTTP 상태 코드가 200과 299 사이일 경우 true

 

await로는 아래와 같이 사용할 수 있다.

 

let response = await fetch(url);

if (response.ok) { // HTTP 상태 코드가 200~299일 경우
  let json = await response.json();
} else {
  alert("Error: " + response.status); // 아니라면 상태코드 반환
}

response 에는 프라미스를 기반으로 하는 다양한 메소드들이 존재한다.

response.text() : response를 텍스트형태로 반환
response.json() : JSON 포멧의 응답을 읽고 자바스크립트 객체형태로 반환
response.formData() : FormData 객체 형태로 반환
response.blob() : Blob 객체형태로 반환

 

API에 저장된 데이터를 보여주는 웹페이지나 애플리케이션에서는
GET 방식의 HTTP 통신을 사용하기에 충분하다.

 

POST의 경우에는 다시 사용해보면서 이해한 후에 추가하도록 하겠다.