blob: 7f1f35da9b3cbe76a8ac9adbb82fbab48c2fd3be (
plain)
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
|
---
title: Fetch API
slug: Web/API/Fetch_API
tags:
- API
- Experimental
- Fetch
- Landing
- Reference
- XMLHttpRequest
- リクエスト
- レスポンス
translation_of: Web/API/Fetch_API
---
<div>{{DefaultAPISidebar("Fetch API")}}</div>
<p>Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。{{domxref("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。</p>
<h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と利用方法</h2>
<p>Fetch では {{domxref("Request")}} と {{domxref("Response")}} が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といったリクエストとレスポンスを扱う API や、独自のリクエストを発生させる場面でも利用できるようになるでしょう。</p>
<p>また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。</p>
<p>リソースを取得するためのリクエストは、 {{domxref("GlobalFetch.fetch")}} メソッドを呼ぶことで作成できます。このメソッドは {{domxref("Window")}} や {{domxref("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。</p>
<p><code>fetch()</code> メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{domxref("Response")}} に解決できる {{domxref("Promise")}} を返します。第2引数は任意で、 <code>init</code> オプションオブジェクトを渡すことができます。（{{domxref("Request")}} をご覧ください）。</p>
<p>{{domxref("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります（{{domxref("Body")}} をご覧ください）。</p>
<p>{{domxref("Request.Request","Request()")}} および {{domxref("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{domxref("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。</p>
<h3 id="jQueryとの違い">jQueryとの違い</h3>
<p><code>fetch</code> は主に3つの点で <code>jQuery.ajax()</code> と異なります。</p>
<ul>
<li><code>fetch()</code> から返された Promise は、応答が HTTP <code>404</code> または <code>500</code> であっても、<strong>HTTP エラーステータスで拒否されません</strong>。代わりに、正常に解決され（<code>ok</code> ステータスが <code>false</code> に設定されます）、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。</li>
<li><code>fetch()</code> は <strong>クロスサイト Cookie</strong> を受信<s>できません</s>。フェッチを使用してクロスサイトセッションを確立することは<s>できません</s>。<s>他のサイトの <code>Set-Cookie</code> ヘッダーは黙って無視されます。</s></li>
<li><code>認証情報: 'same-origin'</code> を設定しない限り、<code>fetch()</code> は <strong>Cookie を送信しません</strong>。
<ul>
<li><a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">2017年8月</a>、仕様によりデフォルトの認証情報ポリシーが <code>'same-origin'</code> に変更され、古いネイティブ fetch が以下のブラウザのバージョンで更新されました。
<ul>
<li>Firefox バージョン 61.0b13</li>
<li>Safari バージョン 12</li>
<li>Chrome バージョン 68</li>
</ul>
</li>
<li>これらのブラウザより古いバージョンをターゲットにしている場合は、Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに <code>'same-origin'</code> <a href="https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init オプション</a> の認証情報を必ず含めてください。</li>
</ul>
</li>
</ul>
<div class="note">
<p><strong>注</strong>: Fetch API の詳しい利用方法は <a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a> を参照してください。また <a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a> では、Fetch API の基本概念が解説されています。</p>
</div>
<h3 id="Aborting_a_fetch" name="Aborting_a_fetch">フェッチを中止する</h3>
<p>ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{domxref("AbortController")}} および {{domxref("AbortSignal")}} インターフェイス（つまり Abort API）に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。</p>
<h2 id="Fetch_Interfaces" name="Fetch_Interfaces">Fetch インターフェイス</h2>
<dl>
<dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
<dd><code>fetch()</code> メソッドはリソース取得のために使用されます。</dd>
<dt>{{domxref("Headers")}}</dt>
<dd>リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。</dd>
<dt>{{domxref("Request")}}</dt>
<dd>リソースのリクエストを表します。</dd>
<dt>{{domxref("Response")}}</dt>
<dd>リクエストに対するレスポンスを表します。</dd>
</dl>
<h2 id="Fetch_mixin" name="Fetch_mixin">Fetch ミックスイン</h2>
<dl>
<dt>{{domxref("Body")}}</dt>
<dd>レスポンスとリクエストの本体に関係するメソッドが定義されています。これらを利用することで、コンテントタイプ自身と、コンテントタイプごとの処理を定めることが可能になります。</dd>
</dl>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
<tr>
<td>{{SpecName('Fetch')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2>
<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
<h2 id="関連情報">関連情報</h2>
<ul>
<li><a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li>
<li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
<li><a href="/docs/Web/HTTP">HTTP</a></li>
<li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
<li><a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
</ul>
|
