Response

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 타입을 부여해야 한다는 걸 보실 겁니다.

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 객체를 생성할 수도 있습니다.

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