Response

Response() (en-US)

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

Response.body (en-US) 읽기 전용

본문 내용의 ReadableStream입니다.

Response.bodyUsed (en-US) 읽기 전용

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

Response.headers (en-US) 읽기 전용

응답에 연관된 Headers (en-US) 객체입니다.

Response.ok 읽기 전용

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

Response.redirected (en-US) 읽기 전용

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

Response.status (en-US) 읽기 전용

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

Response.statusText (en-US) 읽기 전용

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

Response.type (en-US) 읽기 전용

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

Response.url (en-US) 읽기 전용

응답 URL입니다.

Response.error() (en-US)

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

Response.redirect() (en-US)

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

Request.arrayBuffer() (en-US)

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

Request.blob() (en-US)

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

Request.clone() (en-US)

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

Request.formData() (en-US)

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

Request.json() (en-US)

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

Request.text() (en-US)

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

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

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

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

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

const response = new Response();

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

// 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);

• Service Worker API
• HTTP 접근 제어 (CORS)
• HTTP