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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
---
title: WindowOrWorkerGlobalScope.fetch()
slug: Web/API/fetch
tags:
- API
- Experimental
- Fetch
- Fetch API
- GlobalFetch
- Method
- Reference
- WindowOrWorkerGlobalScope
- request
- メソッド
translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
---
<p>{{APIRef("Fetch API")}}</p>
<p><span class="seoSummary"><code><strong>fetch()</strong></code> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら満足するプロミスを返します。</span>このプロミスはリクエストに対するレスポンスを表す {{domxref("Response")}} で解決します。プロミスは HTTP エラーでは拒否されず、ネットワークエラーでのみ拒否されます。 HTTP エラーをチェックするには、 <code>then</code> ハンドラーを使用する必要があります。</p>
<p><code>WindowOrWorkerGlobalScope</code> は {{domxref("Window")}} と {{domxref("WorkerGlobalScope")}} の両方で実装されています。これはつまり <code>fetch()</code> メソッドはあなたがリソースを取得したいと思うような大部分コンテキストで使用可能ということです。</p>
<p>{{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスはネットワークエラーが発生した場合 (すなわち普通はパーミッション問題などがあったとき) のみ拒否されます。 {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスは HTTP エラー (<code>404</code> など) では拒否<em>されません</em>。代わりに、 <code>then()</code> ハンドラーで {{domxref("Response.ok")}} や {{domxref("Response.status")}} プロパティをチェックする必要があります。</p>
<p><code>fetch()</code> メソッドは取得するリソースのディレクティブではなく <a href="/ja/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> の <code>connect-src</code> ディレクティブによって制御されます。</p>
<div class="note">
<p><strong>注</strong>: <code>fetch()</code> メソッドの引数は {{domxref("Request.Request","Request()")}} コンストラクターと全く同じです。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">const <var>fetchResponsePromise</var> = fetch(<var>resource</var> [, <var>init</var>])
</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
<dt><code><var>resource</var></code></dt>
<dd>取得したいリソースを定義します。以下の 2 つが使用出来ます。
<ul>
<li>取得したいリソースの直接の URL を含む {{domxref("USVString")}}。ブラウザーによってはスキームとして <code>blob:</code> と <code>data:</code> を受け入れます。</li>
<li>{{domxref("Request")}} オブジェクト。</li>
</ul>
</dd>
<dt><code><var>init</var></code> {{optional_inline}}</dt>
<dd>
<p>リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。</p>
<dl>
<dt><code>method</code></dt>
<dd>リクエストするメソッド、<code>GET</code>、<code>POST</code> など。なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。<br>
(この動作は Firefox 65 で修正されました — {{bug(1508661)}} を参照)</dd>
<dt><code>headers</code></dt>
<dd>リクエストに追加したいヘッダーで、{{domxref("Headers")}} オブジェクトか {{domxref("ByteString")}} 値を持つオブジェクトリテラルで指定してください。なお、<a href="/ja/docs/Glossary/Forbidden_header_name">一部の名前は禁止されています</a>。</dd>
<dt><code>body</code></dt>
<dd>リクエストに追加したい本文です。これには {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, {{domxref("ReadableStream")}} オブジェクトなどが使用できます。メソッドが <code>GET</code> や <code>HEAD</code> の場合使用できないので注意してください。</dd>
<dt><code>mode</code></dt>
<dd>リクエストで使いたいモードです。例: <code>cors</code>, <code>no-cors</code>, <code>same-origin</code></dd>
<dt><code>credentials</code></dt>
<dd>リクエストに使用したいリクエスト認証情報、 <code>omit</code>, <code>same-origin</code>, <code>include</code> です。現在のドメインの Cookie を自動で送るためにはこのオプションを指定する必要があります。 Chrome 50 から、このプロパティは{{domxref("FederatedCredential")}} インスタンスや {{domxref("PasswordCredential")}} インスタンスを受け付けるようになりました。</dd>
<dt><code>cache</code></dt>
<dd>使用したいリクエストの<a href="/ja/docs/Web/API/Request/cache">キャッシュモード</a>です。</dd>
<dt><code>redirect</code></dt>
<dd>使用するリダイレクトモードです。 <code>follow</code> (自動でリダイレクトに従う)、 <code>error</code> (リダイレクトが起こった場合エラーを伴って中止する)、 <code>manual</code> (手動でリダイレクトを処理する)。Chrome の既定値は <code>follow</code> です (バージョン 47 より前の既定値は <code>manual</code> でした)。</dd>
<dt><code>referrer</code></dt>
<dd>{{domxref("USVString")}} でリクエストのリファラーを指定します。これは同じオリジンの URL、 <code>about:client</code>、空文字列のいずれかを取ることができます。</dd>
<dt><code>referrerPolicy</code></dt>
<dd>リクエストで使用する<a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policies">リファラーポリシー</a>を指定します。使用可能な値は、 <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>same-origin</code>, <code>origin</code>, <code>strict-origin</code>, <code>origin-when-cross-origin</code>, <code>strict-origin-when-cross-origin</code>, or <code>unsafe-url</code> のいずれかです。</dd>
<dt><code>integrity</code></dt>
<dd>リソースに <a href="/ja/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 値を含ませることが出来ます (例：<code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</dd>
<dt><code>keepalive</code></dt>
<dd><code>keepalive</code> オプションはページより長生きするリクエストを許可するのに使われます。<code>keepalive</code> フラグつきの Fetch は{{domxref("Navigator.sendBeacon()")}} API の置き換えです。</dd>
<dt><code>signal</code></dt>
<dd>{{domxref("AbortSignal")}} オブジェクトのインスタンスです。つまり {{domxref("AbortController")}} 経由で fetch リクエストと通信したり望む場合には中止したりできます。</dd>
</dl>
</dd>
</dl>
<h3 id="Return_value" name="Return_value">返値</h3>
<p>{{domxref("Promise")}} で、 {{domxref("Response")}} オブジェクトに解決します。</p>
<h3 id="Exceptions" name="Exceptions">例外</h3>
<dl>
<dt><code>AbortError</code></dt>
<dd>{{domxref("AbortController")}} メソッドまたは {{domxref("AbortController.abort", "abort()")}} メソッドの呼び出しによりリクエストが中止された。</dd>
<dt><code>TypeError</code></dt>
<dd>指定された URL がユーザー認証情報を含んでいる。この情報は {{HTTPHeader("Authorization")}} ヘッダーを用いて提供するべきです。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) では {{domxref("Request")}} オブジェクトを関連するコンストラクターを使って作成しています。その後 <code>fetch()</code> を呼んで取得しています。画像を fetch している時から適切な MIME タイプを与えるために response の {{domxref("Body.blob")}} を実行し、適切に処理されます。そして ObjectURL を作成し {{htmlelement("img")}} 要素に追加して表示させています。</p>
<pre class="brush: js notranslate">const myImage = document.querySelector('img');
let myRequest = new Request('flowers.jpg');
fetch(myRequest)
.then(function(response) {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.blob();
})
.then(function(response) {
let objectURL = URL.createObjectURL(response);
myImage.src = objectURL;
});</pre>
<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) では上記の内容に加えて、<code>fetch()</code> を呼び出すとき、初期化オブジェクト <code><var>init</var></code> を渡しています。</p>
<pre class="brush: js notranslate">const myImage = document.querySelector('img');
let myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');
const myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};
let myRequest = new Request('flowers.jpg');
fetch(myRequest, myInit).then(function(response) {
// ...
});</pre>
<p>同様に <code><var>init</var></code> オブジェクトを <code>Request</code> コンストラクターに渡しても、同じ効果が得られます。</p>
<pre class="brush: js notranslate">let myRequest = new Request('flowers.jpg', myInit);</pre>
<p><code><var>init</var></code> の <code><var>init</var></code> としてオブジェクトリテラルを使用することもできます。</p>
<pre class="brush: js notranslate">const myInit = {
method: 'GET',
headers: {
'Content-Type': 'image/jpeg'
},
mode: 'cors',
cache: 'default'
};
let myRequest = new Request('flowers.jpg', myInit);
</pre>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>最新の仕様では <code>WindowOrWorkerGlobalScope</code> の中で部分的に定義。</td>
</tr>
<tr>
<td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>初回定義</td>
</tr>
<tr>
<td>{{SpecName('Credential Management')}}</td>
<td>{{Spec2('Credential Management')}}</td>
<td>{{domxref("FederatedCredential")}} または {{domxref("PasswordCredential")}} のインスタンスを <code>init.credentials</code> の値として追加。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li>
<li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/ja/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li>
<li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
</ul>
|
