1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: Request
slug: Web/API/Request
translation_of: Web/API/Request
---
<div>{{APIRef("Fetch")}}</div>
<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>의 <strong><code>Request</code></strong>는 리퀘스트 리소스를 표현해주는 인터페이스입니다. </p>
<p>{{domxref("Request.Request()")}} 생성자 메서드를 사용하는 것으로, 새로운 <code>Request</code>오브젝트를 생성할 수 있습니다. 이 인터페이스는 그리 자주 사용되지 않는 것으로 service worker의 {{domxref("FetchEvent.request")}}와 같은 별개의 API와 만나는 경우가 더 잦을 것입니다.</p>
<h2 id="생성자">생성자</h2>
<dl>
<dt>{{domxref("Request.Request()")}}</dt>
<dd>새로운 <code>Request</code> 객체를 생성합니다.</dd>
</dl>
<h2 id="프로퍼티">프로퍼티</h2>
<dl>
<dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
<dd>Request 메서드 (<code>GET</code>, <code>POST</code> 같은것들)을 포함합니다.</dd>
<dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
<dd>Request의 URL을 포함합니다.</dd>
<dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
<dd>Request의 {{domxref("Headers")}}와 관련된 정보를 포함하고 있습니다.</dd>
<dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
<dd>리퀘스트의 컨텍스트 (예: <code>audio</code>, <code>image</code>, <code>iframe</code>)을 포함하고 잇습니다.</dd>
<dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
<dd>리퀘스트의 referrer 정보 (예:<code>client</code>)을 포함하고 있습니다.</dd>
<dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
<dd>Request의 referrer policy 정보 (예: <code>no-referrer</code>)를 포함하고 있습니다.</dd>
<dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
<dd>Request의 모드를 (예: <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>) 포함하고 있습니다.</dd>
<dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
<dd>Request의 자격 증명서(credentials) (예: <code>omit</code>, <code>same-origin</code>)를 포함하고 있습니다.</dd>
<dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
<dd>Request의 처리 방법을 위한 모드 (예: <code>follow</code>, <code>error</code>, or <code>manual</code>)를 포함합니다.</dd>
<dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
<dd>리퀘스트의 <a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 해쉬값(예:<code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)을 포함합니다.</dd>
<dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
<dd>Request의 캐시모드를 (예: <code>default</code>, <code>reload</code>, <code>no-cache</code>) 포함합니다.</dd>
</dl>
<p><code>Request</code>는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.</p>
<dl>
<dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
<dd>{{domxref("ReadableStream")}}을 바디 컨텐츠로 가져올 수 있는 간단한 게터 프로퍼티입니다.</dd>
<dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
<dd>Response에서 바디가 사용되었는가의 여부를 {{domxref("Boolean")}} 형태로 표시합니다.</dd>
</dl>
<h2 id="메서드">메서드</h2>
<dl>
<dt>{{domxref("Request.clone()")}}</dt>
<dd><code>Request</code>의 복사본을 생성합니다.</dd>
</dl>
<p><code>Request</code>는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.</p>
<dl>
<dt>{{domxref("Body.arrayBuffer()")}}</dt>
<dd>{{domxref("ArrayBuffer")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
<dt>{{domxref("Body.blob()")}}</dt>
<dd>{{domxref("Blob")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
<dt>{{domxref("Body.formData()")}}</dt>
<dd>{{domxref("FormData")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
<dt>{{domxref("Body.json()")}}</dt>
<dd>{{domxref("JSON")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
<dt>{{domxref("Body.text()")}}</dt>
<dd>{{domxref("USVString")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
</dl>
<div class="note">
<p><strong>Note</strong>: {{domxref("Body")}} 함수는 한번밖에 실행할 수 없습니다. 두번째부터는 빈 문자열, 혹은 ArrayBuffer이 반환됩니다.</p>
</div>
<h2 id="예시">예시</h2>
<p>다음의 예시들은 Request를 이용해 스크립트와 같은 디렉터리에 존재하는 사진의 여러가지 정보를 불러오는 방법입니다. <code>Request()</code> 생성자를 사용하여 새로운 Request를 생성하여 몇몇 몇 프로퍼티를 반환합니다.</p>
<pre class="brush: js">const myRequest = new Request('http://localhost/flowers.jpg');
const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit
</pre>
<p>{{domxref("GlobalFetch.fetch()")}}의 매개변수에 Request 객체를 전달하는것으로 then 파라미터를 이끌어낼 수 있습니다. 아래는 그에대한 예시입니다.</p>
<pre class="brush: js">fetch(myRequest)
.then(response => response.blob())
.then(blob => {
myImage.src = URL.createObjectURL(blob);
});</pre>
<p>아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다. Request() 생성자를 사용하여 초기 데이터 및 본문 내용이 포함 된새 요청을 만듭니다.</p>
<p> </p>
<p>아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다. Request() 생성자를 사용하여 초기 데이터와 Body의 컨텐츠를 읽어올 수 있습니다.</p>
<pre class="brush: js">const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true
</pre>
<div class="note">
<p><strong>Note:</strong> Body의 타입은 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} 혹은 {{domxref("ReadableStream")}}로만 올 수 있습니다. 따라서 payload에 JSON객체를 추가하려면 해당 객체를 문자열로 지정할 수 있습니다.</p>
</div>
<p>그런 다음 Request 객체를 매개 변수로 {{domxref("GlobalFetch.fetch()")}} 호출에 전달하여 api 요청을 가져와 응답을 얻을 수 있습니다. 아래는 예시입니다.</p>
<pre class="brush: js">fetch(myRequest)
.then(response => {
if (response.status === 200) {
return response.json();
} else {
throw new Error('Something went wrong on api server!');
}
})
.then(response => {
console.debug(response);
// ...
}).catch(error => {
console.error(error);
});</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">코멘트</th>
</tr>
<tr>
<td>{{SpecName('Fetch','#request-class','Request')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_지원">브라우저 지원</h2>
<p>{{Compat("api.Request")}}</p>
<h2 id="관련항목">관련항목</h2>
<ul>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
<li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
</ul>
|
