JS - fetch

10월 말에 다치고 부터 생활패턴이 꼬이더니 순식간에 2달 가량 흐른거 같다. 그냥 게을러졌다.. 🍄
연말이 되니 번뜩 정신이 들더라.. ㅎㅎ; 💦

fetch API 에 대해 메모하려 한다.

fetch API

비동기 환경에서 비동기로 통신하여 통신에 성공할 경우 Promise 객체를 반환하는 API 이다. XHLHttpRequest 와 비슷하지만 CORS, HTTP 관련하여 더 많은 지원을 하고 있다.
비동기 환경에서 실행되므로 async/await 와 같이 사용할 수 있다.

// 출처: https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

fetch("https://example.com/profile/avatar", {
  method: "PUT",
  body: formData,
})
  .then((response) => response.json())
  .catch((error) => console.error("Error:", error))
  .then((response) => console.log("Success:", JSON.stringify(response)));

구성

HTTP Request, Response, Headers, Body 를 가지고 있으며, 인스턴스를 생성하지 않고 직접 호출하여 사용하고 Service Worker 와 같은 API에서도 쓸 수 있다.

fetch(url, options)

Request

• R/W : 작성 가능 여부 W만 작성 가능

프로퍼티	개요	R/W
body	문자열, FormData, Blob 등 데이터	W
cache	Request의 cache 모드	W
credentials	Request의 인증정보, 쿠키 관련	W
destination	Request 리소스 타입 (image, worker)	R
headers	Request Headers Object	W
integrity	서브 리소스 정합성 값(브라우저가 체크하는 보안 기능)	W
isReloadNavigation	리로드 네비게이션 Request 여부	R
isHistoryNavigation	히스토리 네비게이션 Request 여부	R
method	Request method	W
keepalive	웹페이지보다 Request 가 더 오래 존속	W
mode	Request Mode (cors)	W
redirect	리다이렉트 취급 방법	W
referrer	현재 페이지를 링크항 이전 Address	W
referrerPolicy	Request에 reffer 정보포함 기준	W
signal	AbortSignal 제어	W

Response

new Response 를 통해 만들 수 있지만 fetch 가 끝나면 반환된다.

프로퍼티	개요
error	통신 에러
headers	Response header
ok	Status 200 - 299
redirect	리다이렉트 여부
redirected	리다이렉트 url 다수 여부
status	상태 코드
statusText	상태 코드 메세지
type	응답 타입
url	응답 URL

Body

Mixin 으로 Request 와 Response 가 상속받으며, bodyUsed 가 true 인 경우 body 를 사용할 수 없다.

메소드	개요
body	ReadableStrem 객체 (데이터 스트림을 포함)
bodyUsed	body 사용여부
arrayBuffer()	해당 인스턴스 반환
blob()	해당 인스턴스 반환
formData()	해당 인스턴스 반환
json()	JSON.parse 결과 반환
text()	UTF-8로 인코딩한 결과 반환

Headers

속성은 대소문자를 보편적으로 구별하지 않지만 구별하는 것도 있으므로 구분하여 사용하는 것이 좋다.

메소드	개요
append()	새로운 헤더 추가
delete()	해더 삭제
get()	값 반환
set()	변경 및 없으면 추가
has()	포함여부

async function getImage(url) {
  const requestPayload = new Request(url, {
    method: "GET",
    headers: {
      "Content-Type": "image/jpeg",
      Accept: "image/jpeg",
    },
  });

  const response = await fetch(requestPayload);
  return response?.blob();
}

getImage().then((blob) => {
  const img = document.createElement("img");
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
});

참고자료

• 인프런 - 자바스크립트 ES6+심화
• Fetch - Living Standard
• Fetch API - MDN

---

개인이 참고하고자 작성한 글이며, 잘못된 정보가 있을 수 있습니다. 잘못된 정보는 메일로 보내주시면 감사하겠습니다. 🙏