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
|
---
title: Fetch API
slug: Web/API/Fetch_API
translation_of: Web/API/Fetch_API
---
<div>{{DefaultAPISidebar("Fetch API")}}</div>
<p class="summary"><span class="seoSummary">Die Fetch API bietet eine Schnittstelle zum Abrufen von Ressourcen (auch über das Netzwerk). Wer schon einmal mit {{DOMxRef("XMLHttpRequest")}} gearbeitet hat wird Ähnlichkeiten erkennen. Die neue API bietet jedoch einen ganzen Satz leistungsfähigerer und flexiblerer Funktionen.</span></p>
<h2 id="Konzepte_und_Verwendung">Konzepte und Verwendung</h2>
<p>Fetch bietet eine generische Definition von {{DOMxRef("Request")}} und {{DOMxRef("Response")}} Objekten (und anderen Dingen, die mit Anfragen über ein Netzwerk zu tun haben). Dadurch können sie überall dort eingesetzt werden, wo sie in Zukunft benötigt werden, sei es für Service Worker, die Cache-API und andere ähnliche Dinge, mit denen Anfragen und Antworten abgewickelt oder geändert werden, oder in jedem Anwendungsfall, für den Sie möglicherweise eigene Antworten programmatisch erstellen müssen.</p>
<p>Sie enthält auch eine Definition für verwandte Konzepte wie CORS und die HTTP-Origin-Semantik, die ihre separaten Definitionen an anderer Stelle ersetzen.</p>
<p>Verwenden Sie zum Erstellen einer Anfrage und zum Abrufen einer Ressource die Methode {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}. Es ist in mehreren Schnittstellen implementiert, insbesondere {{DOMxRef("Window")}} und {{DOMxRef("WorkerGlobalScope")}}. Dadurch ist es in nahezu jedem Kontext verfügbar, in dem Sie Ressourcen abrufen möchten.</p>
<p>Die Methode <code>fetch()</code> nimmt ein obligatorisches Argument entgegen, den Pfad zu der Ressource, die Sie abrufen möchten. Sie gibt ein {{DOMxRef("Promise")}} zurück, das in die {{DOMxRef("Response")}} dieser Anfrage aufgelöst wird, unabhängig davon, ob sie erfolgreich ist oder nicht. Sie können optional auch ein <code>init</code> Objekt mit Optionen als zweites Argument übergeben (siehe {{DOMxRef("Request")}}).</p>
<p>Nachdem eine {{DOMxRef("Response")}} abgerufen wurde, stehen eine Reihe von Methoden zur Verfügung, mit denen der Antwort-Inhalt (Body) definiert werden kann und wie er verarbeitet werden soll (siehe {{DOMxRef("Body")}}).</p>
<p>Sie können eine Anfrage und Antwort direkt erstellen, indem Sie die Konstruktoren {{DOMxRef("Request.Request", "Request()")}} und {{DOMxRef("Response.Response", "Response()")}} verwenden, was Sie aber wahrscheinlich in den seltensten Fällen tun werden. Stattdessen werden diese eher als Ergebnis anderer API-Aktionen erstellt (z. B. durch {{DOMxRef("FetchEvent.respondWith()")}} von Service Workern).</p>
<div class="note">
<p>Hinweis: Erfahren Sie mehr über die Verwendung der Funktionen der Fetch API in der <a href="/de/docs/Web/API/Fetch_API/Using_Fetch">Verwendung von Fetch</a> und lernen Sie die <a href="/de/docs/Web/API/Fetch_API/Basic_concepts">Grundkonzepte von Fetch</a>.</p>
</div>
<h3 id="Einen_Abruf_abbrechen">Einen Abruf abbrechen</h3>
<p>Browser haben begonnen, experimentelle Unterstützung für die Schnittstellen {{DOMxRef("AbortController")}} und {{DOMxRef("AbortSignal")}} hinzuzufügen (auch Abort API genannt), die den Abbruch von Operationen durch Fetch und XHR ermöglichen, sofern diese noch nicht abgeschlossen sind. Weitere Informationen finden Sie auf den Schnittstellenseiten.</p>
<h2 id="Fetch_Interfaces">Fetch Interfaces</h2>
<dl>
<dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt>
<dd>Die <code>fetch()</code> Methode zum Abrufen einer Ressource.</dd>
<dt>{{DOMxRef("Headers")}}</dt>
<dd>Stellt die Antwort-/Anfrageheader dar, damit Sie sie abfragen und je nach Ergebnis unterschiedliche Aktionen ausführen können.</dd>
<dt>{{DOMxRef("Request")}}</dt>
<dd>Stellt eine Ressourcenanfrage dar.</dd>
<dt>{{DOMxRef("Response")}}</dt>
<dd>Stellt die Antwort auf eine Anfrage dar.</dd>
</dl>
<h2 id="Fetch_mixin">Fetch mixin</h2>
<dl>
<dt>{{DOMxRef("Body")}}</dt>
<dd>Stellt Methoden bereit, die sich auf den Hauptteil (Body) der Antwort/Anfrage beziehen, sodass Sie den Inhaltstyp angeben können und wie dieser behandelt werden soll.</dd>
</dl>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName("Fetch")}}</td>
<td>{{Spec2("Fetch")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/API/Fetch_API/Using_Fetch">Verwendung von Fetch</a></li>
<li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
<li><a href="/de/docs/Web/HTTP">HTTP</a></li>
<li><a href="https://github.com/github/fetch">Fetch Polyfill</a></li>
<li><a href="/de/docs/Web/API/Fetch_API/Basic_concepts">Grundkonzepte von Fetch</a></li>
</ul>
|
