Request
Fetch API의 Request 인터페이스는 리소스 요청을 나타냅니다.
새로운 Request 객체는 Request() 생성자로도 생성할 수 있지만, 보통은 서비스 워커의 FetchEvent.request (en-US)처럼 다른 API 작업의 결과로서 만나게 됩니다.
생성자
Request()-
새로운
Request객체를 생성합니다.
인스턴스 속성
Request.body(en-US) 읽기 전용-
본문 내용의
ReadableStream입니다. Request.bodyUsed(en-US) 읽기 전용-
요청의 본문이 사용됐는지 아닌지 나타내는
true또는false입니다. Request.cache(en-US) 읽기 전용-
요청의 캐시 모드(
default,reload,no-cache등)입니다. Request.credentials읽기 전용-
요청의 자격 증명(
omit,same-origin,include등)입니다. 기본 값은same-origin입니다. Request.destination(en-US) 읽기 전용-
요청의 목적지를 묘사하는 문자열을 반환합니다. 요청한 콘텐츠의 유형을 나타내는 문자열입니다.
Request.headers(en-US) 읽기 전용-
요청에 연관된
Headers(en-US) 객체입니다. Request.integrity(en-US) 읽기 전용-
요청의 하위 리소스 무결성 값(예시:
sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)입니다. Request.method(en-US) 읽기 전용-
요청의 메서드(
GET,POST등)입니다. Request.mode(en-US) 읽기 전용-
요청의 모드(
cors,no-cors,same-origin,navigate등)입니다. Request.redirect(en-US) 읽기 전용-
리다이렉트 처리 방법입니다.
follow,error,manual중 하나입니다. Request.referrer(en-US) 읽기 전용-
요청의 리퍼러(예시:
client)입니다. Request.referrerPolicy(en-US) 읽기 전용-
요청의 리퍼러 정책(
no-referrer등)입니다. Request.signal(en-US) 읽기 전용-
요청에 연관된
AbortSignal을 반환합니다. Request.url(en-US) 읽기 전용-
요청 URL입니다.
인스턴스 메서드
Request.arrayBuffer()(en-US)-
요청 본문의
ArrayBuffer표현으로 이행하는 프로미스를 반환합니다. Request.blob()(en-US)-
요청 본문의
Blob표현으로 이행하는 프로미스를 반환합니다. Request.clone()(en-US)-
Request객체의 복사본을 생성합니다. Request.formData()(en-US)-
요청 본문의
FormData표현으로 이행하는 프로미스를 반환합니다. Request.json()(en-US)-
요청 본문을
JSON으로 파싱한 결과로 이행하는 프로미스를 반환합니다. Request.text()(en-US)-
요청 본문의 text 표현으로 이행하는 프로미스를 반환합니다.
참고: 요청 본문 함수는 오직 한 번만 실행할 수 있습니다. 이후의 호출은 빈 문자열 혹은 빈 ArrayBuffer로 이행할 것입니다.
예제
다음 코드 조각에서는 Request() 생성자로 스크립트와 같은 디렉토리에 위치하는 이미지 파일에 대한 새로운 요청을 생성하고, 해당 요청의 몇몇 속성을 반환합니다.
js
const request = new Request("https://www.mozilla.org/favicon.ico");
const url = request.url;
const method = request.method;
const credentials = request.credentials;
그 다음엔 fetch() 호출의 매개변수에 이 Request 객체를 제공하여 이미지를 취득할 수 있습니다.
js
fetch(request)
.then((response) => response.blob())
.then((blob) => {
image.src = URL.createObjectURL(blob);
});
다음 코드 조각에서는 Request() 생성자를 호출할 때, 본문을 바라는 API에 대한 요청을 위해 일부 설정과 본문 데이터를 제공합니다.
js
const request = new Request("https://example.com", {
method: "POST",
body: '{"foo": "bar"}',
});
const url = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;
참고: 본문은 하나의 Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, ReadableStream, String 객체, 문자열 리터럴 등만 가능하므로 JSON 객체를 본문으로 보내려면 먼저 문자열화해야 합니다.
그 다음엔 fetch() 호출의 매개변수에 이 Request 객체를 제공하여 응답을 받을 수 있습니다.
js
fetch(request)
.then((response) => {
if (response.status === 200) {
return response.json();
} else {
throw new Error("API 서버에서 뭔가 잘못됐습니다!");
}
})
.then((response) => {
console.debug(response);
// …
})
.catch((error) => {
console.error(error);
});
명세서
| Specification |
|---|
| Fetch Standard # request-class |
브라우저 호환성
BCD tables only load in the browser