fetch API

fetch API

fetch API 등장배경

Ajax는 XMLHttpRequest(XHR)과 Javascript와 DOM을 이용하여 서버에서 추가 정보를 비동기적으로 가져 올 수있게 해주는 포괄적인 기술을 나타내는 용어다.
하지만 만들어진지 오래되었고 JQuery와 보다 쓰기 쉬운 표준 API가 등장했다.
별도의 라이브러리 대신 최신 브라우저에서 모두 내장되어있는 함수이며 사용이 쉽고 Promise 값을 변환하는 fectch API이다.

fectch API란?

fectch API는 다양한 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경분 가져오기 등등 다양한 일을 페이지 새로고침없이 수행한다.

fectch 사용법

fectch()함수는 첫번째 인자로 url, 두번째 인자로는 option 객체를 받는다.

  fetch(url, [options])

  url : 접근하고자 하는 url
  [option] : 선택 매개변수(method나 header 지정가능)

두번째 인자로 options의 각 항목은 다음과 같다.

• method : 사용할 메소드를 선택 ('GET', 'POST', 'PUT', 'DELETE' )
• headers : 헤더에 전달할 값 ( { 'content-Type': 'application/json' } )
• body : 바디에 전달할 값 ( JSON.springfy(data) )
• mode : 'cors' 등의 값을 설정 (cors, no-cors, same-origin)
• credentials : 자격 증명을 위한 옵션 설정 (include, same-origin, omit)(default = same-origin)
• cache : 캐쉬 사용 여부 (no-cache, reload, force-cache, only-if-cached)

 let options = {
 
  method : 사용할 메소드를 선택 ('GET', 'POST', 'PUT', 'DELETE' ),
  headers : 헤더에 전달할 값 ( { 'content-Type': 'application/json' } ),
  body : 바디에 전달할 값 ( JSON.springfy(data) ),
  mode : 'cors' 등의 값을 설정 (cors, no-cors, same-origin),
  credentials : 자격증명을 위한 옵션 설정 (include, same-origin, omit)(default = same-origin),
  cache : 캐쉬 사용 여부 (no-cache, reload, force-cache, only-if-cached),

}

fetch(url, options)

fetch API는 Promise를 반환한다고 되어있다. 첫번째 또는 두번째 인자에서 작업을 거친 이후 Promise가 내장 클래스 Response의 인스턴스와 함께 이행(fullfilled)상태가 된다.

  fetch(url, [options])
  .then((response) => reponse.json()) // get이나 post로 불러온 데이터를 JSON으로 파싱해줌
  .catch((err) => console.log("err:", err))