fetch API 개요

비동기 요청의 대표적인 예는 네트워크 요청이다.
네트워크를 통해 이루어지는 요청은 형태가 다양하지만 URL로 요청하는 경우가 가장 흔하며 URL로 요청을 가능하게 해주는 API가 fetch API 다.

fetch API

fetch API는 위와 같이, 특정 URL로부터 정보를 받아오는 역할을 한다. 이 과정이 비동기로 이루어지기 때문에 일정 시간이 걸릴 수 있어 blocking 발생 방지를 위해 로딩 창을 띄어둔다.

fetch 예시

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

Node.js 환경에서는 fetch API가 내장 모듈로 제공되지 않는다.

fetch 사용법

fetch() 함수는 첫번째 인자로 url, 두번째 인자로 옵션 객체를 받는다.반환은 Promise 타입의 객체를 반환한다. API 호출이 성공했을 경우 response객체를 반환하고, 실패했을 경우에는 예외 객체를 reject 함

fetch(url, options) 
.then ((res) => console.log(res))
.catch((err) => console.log(err));

response 객체의 예시

Response {status: 200, ok: true, redirected: false, type: "cors", url: "https://jsonplaceholder.typicode.com/posts/1", …}

json()

JSON 형태의 데이터를 응답하기 때문에 , response 객체는 json()메서드를 제공한다. 해당 메서드를 호출하면 response 객체로 부터 JSON 포멧의 응답을 자바스크립트 객체로 변환하여 얻을 수 있다.

{status: 'sunny', temperature: '28', fineDust: 'good'}