Response: headers 속성

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017년 3월⁩.

참고 : 이 기능은 Web Worker에서 사용할 수 있습니다.

headers 읽기 전용 속성은 Response 인터페이스의 속성으로, 해당 응답과 연관된 Headers 객체를 포함합니다.

Fetch Response 예제 (또는 Fetch Response 실시간 예제)에서는 Request() 생성자를 사용해 JPG 경로를 전달하여 새로운 Request 객체를 생성합니다. 그 후, fetch()를 사용해 이 요청을 가져오고, 응답에서 Response.blob을 사용해 Blob을 추출한 다음, URL.createObjectURL()을 이용해 객체 URL을 생성하고 이를 <img> 요소에 표시합니다.

fetch() 블록의 맨 위에서는 응답 헤더를 콘솔에 기록한다는 점에 주의하세요.

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

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

fetch(myRequest)
  .then((response) => {
    console.log("response.headers =", response.headers);
    return response.blob();
  })
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });