fetch

fetch : javascript에서 제공하는 전역 메소드로 이전의 XMLHttpRequest를 대체한다

• fetch가 반환하는 Promise객체는 오류상태(404, 500등)를 수신해도 거부하지않는다.
• 응답 status가 200~299를 벗어날경우 ok속성이 false로 설정됨 (res.ok === false)
• credentials 옵션을 제공하지 않으면 교차출처 쿠키를 전송하지않는다.

요청 (Request)

사용예제

아래 코드에서 fetch는 직접 JSON 본문을 받을 수 없기 때문에, HTTP응답을 나타내는 res를 json() 메서드로 파싱하여 본문 Promise를 반환한다.

fetch(Resource, Options?)
  .then((res) => res.json()) 
  .then((data) => console.log(data)) 

Resource

가져오려는 리소스로, URL을 제공하는 문자열 또는 Request 객체가 올 수 있다.

Options

method : request method이며, GET or HEAD메소드에는 Origin 헤더 설정이 되지않는다.

GET, POST, PUT, DELETE, HEAD

headers : Headers객체의 string

• { “Content-Type“ : “application/json“ }

body : 요청 본문으로 아래와같은 데이터가 올 수 있고, GET or HEAD메소드에서는 사용하지못한다.

body의 데이터 유형은 반드시 header의 “Content-Type“과 일치하여야함

• String
• URLSearchParams
• Blob
• ArrayBuffer
• TypedArray
• DataView
• FormData
• literal
• ReadableStream Object

mode : 요청에 사용하려는 모드

• *cors
• no-cors
• same-origin
• navigate(?)

cridentials : 브라우저가 수행하는 작업을 제어하는 자격증명

• *same-origin : 동일출처 URL에 대한 요청에 자격증명을 포함, 동일출처 URL로 전송된 모든 자격증명을 허용.
• omit : 자격증명을 제외한 재전송된 자격증명을 모두 무시
• include : 동일한 출처 및 교차 출처 요청에 모두 자격증명을 포함. 재전송시에도 자격증명 사용.

cache : 요청이 브라우저 HTTP캐시와의 상호작용 방식에 대한 문자열.

• *default
• no-cache
• reload
• force-cache
• only-if-cached

redirect :

*follow : 리다이렉션을 자동으로 따름

manual :

error : 리다이렉션시 에러발생과 함께 중단.

referrer : 요청의 리퍼러를 지정하는 문자열 (*리퍼러 : 요청을 보낸 페이지의 절대/부분 주소를 포함하는 헤더 )

referrerPolicy : 요청에 사용할 리퍼러 정책을 지정한다.

““

no-referrer-when-downgrade

no-referrer

origin

origin-when-cross-origin

same-origin

strict-origin

*strict-origin-when-cross-origin

unsafe-url

integrity : SRI(하위 리소스 무결성)를 포함 (*SRI : 브라우저가 가져오는 리소스가 조작되었는지 확인할수있는 보안기능)

keepalive : 요청이 페이지보다 오래 지속될수있을지 여부, 이를 포함하면 Navigator.sendBeacon() API를 대체한다

signal : AbortSignal 객체의 인스턴스로써, AbortController를 통해 fetch reqeust와 통신

fetch(url , {
  method: "POST", // GET, POST, PUT, DELETE... 등등
  headers: {
    'Content-Type' : 'application/json'
  },  
  mode: "cors", // *cors, no-cors, same-origin
  cache : "default", *default, no-cache, no-store, reload, force-cache, only-if-cache
  cridentals: "same-origin", *same-origin, omit, include
  redirect: "follow", // *follow, manual, error
  referrerPolicy: "",
  body: JSON.stringify(data),
  signal : new AbortSignal(),
})

JSON 데이터 Request 예제

const data = { name : "b4play"}

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type" : "application/json"
  },
  body: JSON.stringify(data)
})
  .then(res => res.json())
  .then(data => console.log(data))

File 업로드 Request 예제

const formData = new FormData();
const fileField = document.querySelector("input[type="file"]");

formData.append("name", "b4play");
formData.append("avatar", "fileField.file[0]");

fetch(url, {
  method : "PUT",
  body : formData,
})

fetch의 성공여부 확인

fetch는 네트워크오류, CORS설정 문제시 TypeError로 거부하지만 이 외의 404같은 에러는 네트워크 에러가 아니므로 거부하지 않는다.

따라서 정확한 fetch의 성공여부를 확인하려면 Promise이행 여부를 확인한 후, res.ok 의 값이 true한지도 확인해야한다.

fetch("image.jpg")
  .then(res => {
    if(res.ok){ // 네트워크 오류 체크
      return res.blob(); 
    }
    else {
      throw Error("네트워크 응답이 올바르지 않습니다")
    }
  })
  .then(myBlob => {
    myImage.src = URL.createObjectURL(myBlob) // blob
  })

응답 (Response)

Response객체는 fetch()의 Promise가 이행될때 반환된다.

Response

• res.status : 상태코드값을 담는 정수값으로 기본값은 200이다
• res.statusText : 상태코드 메시지를 담은 문자열 값으로 기본값은 빈 문자열 ”” 이다
• res.ok : 상태코드가 200~299인지 확인할수있는 boolean값