자바스크립트 Fetch API

자바스크립트에서 fetch()를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다.

 

fetch()가 등장하기 전에는, 클라이언트 단에서 직접 HTTP 요청하고 응답을 받는 게 상당히 복잡해서 request나 axios, jQuery와 같은 라이브러리를 사용했다. 하지만 이제는 브라우저에서 내장된 fetch() 함수를 이용하면 대부분의 HTTP 요청을 할 수 있다.

fetch 사용법

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

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

options에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있고, 아무것도 넣지 않을 경우 GET매서드로 요청이 들어간다.

Promise 객체

자바스크립트에서 비동기 처리를 위해 ES6 이후로 도입된 객체이다. Promise 객체는 전통적인 callback 패턴이 가진 단점을 보완하면서도 비동기 처리 시점을 명확하게 표현할 수 있다.

프로미스 객체는 Promise 생성자 함수를 통해 인스턴스화된다. 이 때 Promise 생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달 받고, 콜백 함수는 resolve와 reject 함수를 인자로 전달 받는다.

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.

  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

 

출처
https://www.daleseo.com/js-window-fetch/
https://poiemaweb.com/es6-promise