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.

* Some parts of this feature may have varying levels of support.

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
# response-class

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Response
Response() constructor
body parameter accepts ReadableByteStream
body parameter is optional
arrayBuffer
blob
body
body is a readable byte stream
bodyUsed
bytes
clone
error() static method
formData
headers
json
json_static
ok
redirect() static method
redirected
status
statusText
text
type
url

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Has more compatibility info.

같이 보기