Response

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Fetch APIResponse 인터페이스는 요청에 대한 응답을 나타냅니다.

새로운 Response 객체는 Response() 생성자로도 생성할 수 있지만, 보통은 서비스 워커의 FetchEvent.respondWith이나 단순히 fetch() 호출 등, 다른 API 작업의 결과로서 만나게 됩니다.

생성자

Response()

새로운 Response 객체를 생성합니다.

인스턴스 속성

Response.body 읽기 전용

본문 내용의 ReadableStream입니다.

Response.bodyUsed 읽기 전용

응답의 본문이 사용됐는지 아닌지 나타내는 불리언입니다.

Response.headers 읽기 전용

응답에 연관된 Headers 객체입니다.

Response.ok 읽기 전용

응답의 성공 (코드가 200-299 범위 내) 여부를 나타내는 불리언입니다.

Response.redirected 읽기 전용

응답이 리디렉션의 결과인지 (즉, URL 목록이 두 개 이상의 항목을 지녔는지) 나타냅니다.

Response.status 읽기 전용

응답의 상태 코드입니다. 성공 시 200입니다.

Response.statusText 읽기 전용

상태 코드에 해당하는 상태 메시지입니다. (예시: 200이면 OK)

Response.type 읽기 전용

응답 유형입니다. (예시: basic, cros)

Response.url 읽기 전용

응답 URL입니다.

정적 메서드

Response.error()

네트워크 오류와 연관된 새로운 Response 객체를 반환합니다.

Response.redirect()

다른 URL을 가리키는 새로운 응답을 생성합니다.

인스턴스 메서드

Request.arrayBuffer()

응답 본문의 ArrayBuffer 표현으로 이행하는 프로미스를 반환합니다.

Request.blob()

응답 본문의 Blob 표현으로 이행하는 프로미스를 반환합니다.

Request.clone()

Response 객체의 복사본을 생성합니다.

Request.formData()

응답 본문의 FormData 표현으로 이행하는 프로미스를 반환합니다.

Request.json()

응답 본문을 JSON으로 파싱한 결과로 이행하는 프로미스를 반환합니다.

Request.text()

응답 본문의 text 표현으로 이행하는 프로미스를 반환합니다.

예제

이미지 취득하기

저희의 기본 fetch() 예제(미리보기)에서는 간단한 fetch() 호출을 통해 이미지를 취득해서 <img> 요소에 표시합니다. fetch() 호출은 취득 연산과 연관된 Response로 이행하는 프로미스를 반환합니다.

우리는 이미지를 요청하고 있기 때문에, Response.blob()을 실행하여 응답에 올바른 MIME 타입을 부여해야 한다는 걸 보실 겁니다.

js
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
  .then((response) => response.blob())
  .then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  });

Response() 생성자로 자신만의 Response 객체를 생성할 수도 있습니다.

js
const response = new Response();

AJAX 호출

여기서는 JSON 문자열을 생성하는 PHP 프로그램 파일을 호출하고, 간단한 오류 처리와 함께 결과를 JSON 값으로서 출력합니다.

js
// AJAX 호출을 위한 함수
const doAjax = async () => {
  const response = await fetch("Ajax.php"); // Response 객체 생성
  if (response.ok) {
    const jsonValue = await response.json(); // 응답 봄문에서 JSON 값 가져오기
    return Promise.resolve(jsonValue);
  } else {
    return Promise.reject("*** PHP file not found");
  }
};

// 위 함수 호출 후 결과 값 또는 오류 메시지를 콘솔에 기록
doAjax().then(console.log).catch(console.log);

명세서

Specification
Fetch Standard
# response-class

브라우저 호환성

BCD tables only load in the browser

같이 보기