[Javascript] fetch에서 HTTP 헤더 사용하기

 

최근 일하면서 fetch로 백엔드랑 API 통신할 일이 엄청 많아졌는데, fetch를 잘 모르고 통신하다보니 불필요하게 서버에 자주 요청을 보내는 일이 많아졌다 (테스트 하기 위해) 

조금이나마 fetch를 알고 사용하기 위해 공부차 기록하기!

 

 

 

fetch

- 서버에 네트워크 요청을 보내고 정보를 받아오는 일을 한다.

- fetch는 AJAX(Asynchronous Javascript And XML)이라는 기술로 서버에서 정보를 '비동기적'으로 가져올 수 있게 해주는 방식

- 페이지의 새로고침(유저 입장에서는 깜빡임) 없이 정보를 브라우저에 표시

-  XMLHttpRequest라는 오래된 통신 방식에서 비롯되었다.

- fetch는 모던 자바스크립트에서 지원되기 시작한 통신 메소드로 구식 브라우저에서는 폴리필을 사용

 

fetch 사용 기본형

//url은 접근하고자 하는 URL
//option은 method나 header 지정
let promise = fetch(url, {option})

- option에 아무것도 지정하지 않으면 url에게 GET요청을 디폴트로 보내게 된다.

- fetch 메소드를 요청하면 브라우저는 네트워크 요청을 보내고, promise가 반환된다.

- 반환되는 promise는 fetch 메소드를 호출하는 코드에서 사용된다.

 

첫 번째 기본 형태

let response = await fetch(url);
let response_body = await response.json();

두 번째 기본 형태

fetch(url,{
  method: "",	
  headers: "",
  body: {},
})
.then(response => response.json())
.then(commits => alert(commits[0].author.login));

 

fetch의 응답

- fetch의 응답은 두 단계를 거친다.

- 서버에서 응답 헤더headers를 받으면 fetch 메소드를 호출할 때 받은 promise가 내장 클래스 Response의 인스턴스와 함께 이행 상태가 된다.

- 아직 body가 도착하기 전이지만 위의 응답 헤더headers를 보고 요청이 성공(status 200, 201 등)했는지 아닌지를 확인할 수 있다.

- url에 오류가 있거나 네트워크에 문제가 있으면 promise가 거부 상태가 된다.

- promise에서 response를 받게 되면 다음 단계를 진행할 수 있다.

- response에는 promise를 기반으로 하는 다양한 메서드가 존재한다. 이 메서드로 body를 다양한 방식으로 처리할 수 있다.

  - response.json() : 가장 많이 사용. 서버로부터 받은 응답을 JSON 형태로 반환

  - response.text() : 서버로부터 받은 응답을 텍스트로 반환

  - response.formData() : 서버로부터 받은 응답을 formData 객체로 반환

  - response.blob() : 서버로부터 받은 응답을 Blob(타입이 있는 바이너리 데이터)로 반환

  - response.arrayBuffer() : 서버로부터 받은 응답을 ArrayBuffer(바이너리 데이터를 로우레벨 형식으로 표현한 것)로 반환

  - response.body() : 서버로부터 받은 응답을 청크 단위로 반환

- 한 번 처리된 응답은 다른 방식으로 받을 수 없다. (response.json()으로 반환된 응답을 다시 response.text()로 받을 수 없다)

 

 

fetch를 사용할 때의 헤더

 

응답 헤더

- 응답 헤더는 response.headers로 확인

- 맵과 유사한 형태이지만 맵은 아니며 객체 순환 방식을 사용하면 헤더를 순회할 수 있다.

 

요청 헤더

- fetch 메소드로 url에 요청을 보낼 때 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-*

 

fetch로 요청 POST

- fetch의 요청 기본형인 GET 외의 POST를 이용해 서버로 정보를 보낼 수 있음

- option에 body key를 통해 서버에 정보를 전달

- 보낼 수 있는 정보의 종류

  - 문자열

  - JSON

  - formData 객체

  - Blob

  - BufferSource

- 정보를 보내기 위해 Content-Type(보내는 정보의 형식을 명시하기 위해 요청 헤더에 실어 보내는 타입 정보)

- 이 값은 Mime-Type의 종류로 브라우저가 정보를 받았을 때 해야 할 기본 동작을 결정하기 위해 사용

- Content-Type 의 종류

  - Multipart Related MIME Type

    - Content-Type: Multipart/related (Default)

  - XML Media Type

    - Content-Type: Application/xml

  - Application Type

    - Content-Type: Application/javascript

    - Content-Type: Application/octet-stream

    - Content-Type: Application/json (JSON 객체 보낼 때)

    - Content-Type: Application/x-www-form-urlencode

  - Audio Type

    - Content-Type: audio/mpeg

    - Content-Type: audio/x-ms-wma

    - Content-Type: audio/vnd.rn-realaudio

  - Mutipart Type

    - Content-Type: multipart/mixed

    - Content-Type: multipart/alternative

    - Content-Type: multipart/related

    - Content-Type: multipart/formed-data (파일 첨부 시)

  - Text Type

    - Content-Type: text/css

    - Content-Type: text/html

    - Content-Type: text/javascript

    - Content-Type: text/plain

    - Content-Type: text/xml

  - File Type

    - Content-Type: application/msword

    - Content-Type: application/pdf

    - Content-Type: application/vnd.ms-excel

    - Content-Type: application/x-javascript

    - Content-Type: application/zip

    - Content-Type: image/jpeg

@ 모던 자바스크립트 fetch https://ko.javascript.info/fetch