[JavaScript] fetch API 💬

💡 핵심

async function logJSONData() {
  const response = await fetch("http://example.com/movies.json");
  const jsonData = await response.json();
  console.log(jsonData);
}

• 가장 단순한 형태의 fetch()는 가져오고자 하는 리소스의 경로를 나타내는 인수 1개만 받음

Response 객체

• 응답은 Response 객체

  • Response
    • body
    • bodyUsed : 응답 본문이 사용됐는지 아닌지를 나타내는 불리언
    • headers
    • ok : 응답의 성공 여부 나타내는 불리언(200-299)
    • redirected : 응답이 리디렉션의 결과인지
    • status : 응답 상태코드
    • statusText : 상태 코드에 해당하는 상태 메시지 (ex. 200이면 ‘OK’)
    • type : 응답 유형(ex. basic, cros)
    • url : 응답 URL
    • error() : 네트워크 오류와 연관된 새로운 Response 객체 반환
    • redirect() : 다른 URL을 가리키는 새로운 응답 생성
    • arrayBuffer() : 응답 본문을 ArrayBuffer로 이행하는 프로미스 반환
    • blob() : 응답 본문을 Blob으로 이행하는 프로미스 반환
    • clone() : Response 객체 복사본 생성
    • formData() : 응답 본문을 FormData으로 이행하는 프로미스 반환
    • json() : 응답 본문을 JSON으로 파싱한 결과로 이행하는 프로미스 반환
    • text() : 응답 본문을 text로 이행하는 프로미스 반환
  • Response는 HTTP 응답 전체를 나타내는 객체로, JSON 본문 컨텐츠를 추출하려면 json()을 사용해야 함

• fetch() 프로미스는 네트워크 오류가 있을 때만 거부되며,
  404 등 HTTP 오류 시에는 reject 되지 않음

  ⇒ then() 처리기는 반드시 Response.ok 또는 Response.status 속성 확인
  

// POST 메서드 구현 예제
async function postData(url = "", data = {}) {
  // 옵션 기본 값은 *로 강조
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE 등
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
  });
  return response.json(); // JSON 응답을 네이티브 JavaScript 객체로 파싱
}

postData("https://example.com/answer", { answer: 42 }).then((data) => {
  console.log(data); // JSON 데이터가 `data.json()` 호출에 의해 파싱됨
});

fetch()의 options

1. method : GET, POST 등 요청 메서드

   +) Origin 헤더는 HEAD나 GET 메서드의 Fetch 요청에서는 설정 안 됨

2. headers : 요청에 추가하고자 하는 헤더들

   +) Authorization HTTP 헤더는 요청에 추가할 수 있지만, 요청이 다른 출처로 리다이렉트되면 제거됨

3. body : 요청에 추가하고자 하는 본문

4. mode : 요청에 사용할 모드

   • cors, no-cors, same-origin

5. credentials : 브라우저가 자격증명(쿠키, HTTP 인증, TLS 클라이언트 인증서)을 어떻게 취급할지 제어

   • omit : 브라우저가 요청에서 자격증명을 제외
   • same-origin : 브라우저가 동일 출처 URL 요청에 대해서는 자격증명을 보내고, 동일 출처 URL 응답에 포함된 자격증명도 사용하도록 지시(디폴트)
   • include : 브라우저가 동일과 교차 출처 요청 모두에 자격증명을 보냄

6. cache : 요청이 브라우저 HTTP 캐시와 어떻게 상호작용할지 제어

   • default, no-store, reload, no-cache, force-cache, only-if-cached

7. redirect : 리다이렉트 요청 처리법

   • follow : 자동으로 리다이렉트 따라감(디폴트)
   • error : 리다이렉트 발생 시 오류와 함께 요청 중단
   • manual : 호출자가 응답을 다른 컨텍스트에서 처리해야 함

8. referrer : 요청 리퍼러를 지정하는 문자열

   Referer - HTTP | MDN

   • 현재 요청을 보낸 페이지의 절대 혹은 부분 주소
   • ex) 링크를 타고 들어왔다면 해당 링크를 포함하고 있는 페이지의 주소
   • ex) 다른 도메인에 리소스 요청을 보내는 경우라면 해당 리소스를 사용하는 페이지의 주소

9. referrerPolicy

   • 요청에 사용할 리퍼러 정책 지정
   • no-referrer, no-referrer-when-downgrade, same-origin, origin, strict-origin, origin-when-cross-origin, strict-origin-when-cross-origin, unsafe-url

10. integrity

    • 요청의 하위 리소스 무결성 지정
    • 브라우저가 가져온 리소스가 예기치 않은 조작 없이 전달되었는지 검증하는 보안 기능

11. keepalive

    • 요청이 페이지 수명보다 오래 지속되는 걸 허용

12. signal

    • AbortSignal 객체 인스턴스

13. priority : 같은 종류의 취득 요청 중에서 이 요청의 상대적 중요도 지정

    • high, low, auto

이미지 취득 예제

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP 오류! 상태: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

• Response.blob()을 호출해 적합한 MIME 유형 부여
• URL.createObjectURL 로 url 생성해서 img 태그의 src로 넣어줌

const myImage = document.querySelector("img");

const myHeaders = new Headers();
myHeaders.append("Accept", "image/jpeg");

const myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

const myRequest = new Request("flowers.jpg");

fetch(myRequest, myInit).then((response) => {
  // …
});

• 헤더 객체에는 append() 메서드를 통해 요소를 추가할 수 있음

💡 참고 자료

• Fetch API 사용하기 - Web API | MDN
• fetch() 전역 함수 - Web API | MDN