자바스크립트 fetch

 

fetch란? 

fetch()는 최신 AJAX 요청 문법으로 서버로부터 데이터를 요청하는 API이다.  

 

 

 

 

fetch의 기본 문법

let promise = fetch(url, [options])

 

• url – 접근하고자 하는 URL
• options – 선택 매개변수, method나 header 등을 지정할 수 있다.

 

options에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행되어 url로부터 콘텐츠가 다운로드된다. 

fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프로미스가 반환된다.

 

 

fetch(url, [options]).then(callback).catch(callback);

프로미스가 반환되기 때문에 fetch 요청 후에 .then()에서 응답(response) 객체를 받고 catch에서 요청에 대한 에러를 처리할 수 있다. 

 

 

 

fetch 응답(response)의 두 단계 

1. 서버에서 응답 헤더를 받자마자 fetch 호출 시 반환받은 프로미스가 내장 클래스 Response의 인스턴스와 함께 이행(fullfilled) 상태가 된다.

 

이 단계에서 개발자는 응답 헤더를 보고 요청이 성공으로 처리되었는지 아닌지를 응답프로 퍼티인 status와 ok를 사용해 확인할 수 있다.

• status: HTTP 상태코드
• ok: Boolean 값, HTTP 상태 코드가 200가 299 사이일 경우 true

 

2. 프로미스를 기반으로 하는 다양한 메서드를 호출해 응답 본문을 받는다. 아래는 response 객체에서 값을 볼 수 있게 해주는 5가지 메서드들이다.

•  response.text(): 응답을 읽고 텍스트로 반환한다.
•  response.json(): 응답은 JSON 형태로 파싱 한다.
•  response.formData(): 응답을 FormData 객체 형태로 반환한다.
•  response.blob(): 응답을 Blob(타입이 있는 바이너리 데이터)로 반환한다. (주로 이미지나 파일을 다룬다)
•  response.arrayBuffer(): 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환한다. (주로 이미지나 파일을 다룬다)

*본문을 읽을 때 사용되는 메서드는 딱 하나만 사용이 가능하다. 연속으로 사용할 수 없다. 

응답 헤더 

응답 헤더는 response.headers에 map과 유사한 형태로 저장된다. 이 메서드를 사용하면 헤더 일부만 추출하거나 헤더 전체를 순회할 수 있고 append, delete, entries, get, has, keys, set, values 메서드를 사용할 수 있다.

 

요청 헤더

headers 옵션을 사용하면 fetch에 요청 헤더를 작성할 수 있다. headers에 다양한 헤더 정보가 담긴 객체를 넘기게 된다. 단 아래 목록은 금지된 헤더로 headers를 사용해 설정할 수 없다. 

• Accept-Charset, Accept-Encoding
• Access-Control-Request-Headers
• Access-Control-Request-Method
• Connection
• Content-Length
• Cookie, Cookie2
• Date
• DNT
• Expect
• Host
• Keep-Alive
• Origin
• Referer
• TE
• Trailer
• Transfer-Encoding
• Upgrade
• Via
• Proxy-*
• Sec-*
  
  

Post 요청 

Get 이외의 요청을 보내려면 추가 options를 사용해야 한다. 

 

method

 HTTP 메서드 (GET, POST 등)

body

 요청 본문이다. 문자열, FormData객체, Blob / BufferSource 등 중에서 하나여야 한다. 대부분은 JSON을 요청 본문에 실어 보내게 된다. 본문을 보낼 때 주의할 점은 요청 본문에 맞게 Content-Type 헤더를 제대로 설정해 주어야 한다. 기본 설정은 text/plain;charset=UTF-8이다.

 

 

 

 

 

 

 

 

 

reference 

ko.javascript.info/fetch#ref-208

www.zerocho.com/category/HTML&DOM/post/595b4bc97cafe885540c0c1c