fetch API

fetch API

AJAX란 무엇일까?

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

 

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

fetch 사용법

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 Option 객체를 받는다. fetch()를 호출한 경우에 보통 두단계 응답을 거쳐 진행이 되는데, 

1. 서버에서 응답 헤더를 받자마자 fetch 호출 시 반환받은 prmise가 

 

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)

fetch(url, {
  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의 인스턴스와 함께 이행(fulfilled)상태가 된다.

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

 

response에는 프로미스(Promise)를 기반으로 한느 다양한 메소드가 존재한다. 이 메소드를 사용하여 다양한 형태의 응답 본문을 처리할 수 있다.

response.text() : 응답을 읽고 텍스트를 반환한다.

response.json() : 응답을 JSON 형태로 파싱한다.

response.blob() : 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 변환한다.

 

사용예시

fetch(url, [options])
.then((response) => reponse.json()) // get이나 post로 불러온 데이터를 JSON으로 파싱해줌
.then((x) => console.log(JSON.stringify(x)) // 파싱된 데이터를 x로 받아와서 x를 stringify해줌
.catch((err) => console.log("err:", err)) //오류 발생시 오류를 담아서 보여줌