GS - Fetch

fetch

AJAX와 비슷하게 비동기적으로 페이지 새로 고침 없이도 데이터를 요청하고 받을 수 있다.

구식 브라우저에선 폴리필이 필요하다.

let p = fetch(url, [options])

  • url : 접근하고자하는 주소
  • options : method나 header 등

fetch는 Promise를 반환한다.

프로퍼티 status를 통해 HTTP 상태 코드를 알 수 있다.

프로퍼티 ok를 통해 200~299 상태 코드이면 true를 반환한다.

const response = await fetch(url);

if (response.ok) {
    // 200 ~ 299
    let json = await response.json();
} else {
    console.log(response.status);
}

json 형태로 많이 사용하기 때문에 response.json을 많이 하게 되는데 이 외에도 다양한 것들이 있다.

  • reponse.text()
  • repsonse.json()
  • response.formData()
  • response.blob()
  • response.arrayBuffer()

응답 헤더

response.headers.get('Content-Type');

응답헤더로 headers를 가지고 있고 전체를 순회할 수 있다.

요청 헤더

header 옵션을 사용해서 fetch에 요청 헤더를 설정할 수 있다.

let response = fetch(url, {
    headers: {
        Authentication: 'secret'
    }
});

설정할 수 있는 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 요청

method에 POST로 설정해야한다.

body부분에 전송 할 데이터를 넣어준다.

FormData나 Blob, BufferSoure, 문자열 등을 넣어준다.

보통 객체를 JSON.stringify()를 통해 문자열로 전송한다.

let response = await fetch('/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify({
      name: 'hi'
  })
});

이미지 전송하기

Bolb이나 BufferSource객체를 통해서 바이너리 데이터를 전송할 수 있다.


@kwonmory
성장을 위해 노력하고 있는 모리입니다.

깃허브