From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/api/body/arraybuffer/index.html | 87 ++++++++++++++++++++++++ files/de/web/api/body/blob/index.html | 73 ++++++++++++++++++++ files/de/web/api/body/body/index.html | 86 ++++++++++++++++++++++++ files/de/web/api/body/bodyused/index.html | 73 ++++++++++++++++++++ files/de/web/api/body/formdata/index.html | 62 +++++++++++++++++ files/de/web/api/body/index.html | 99 ++++++++++++++++++++++++++++ files/de/web/api/body/json/index.html | 73 ++++++++++++++++++++ files/de/web/api/body/text/index.html | 80 ++++++++++++++++++++++ 8 files changed, 633 insertions(+) create mode 100644 files/de/web/api/body/arraybuffer/index.html create mode 100644 files/de/web/api/body/blob/index.html create mode 100644 files/de/web/api/body/body/index.html create mode 100644 files/de/web/api/body/bodyused/index.html create mode 100644 files/de/web/api/body/formdata/index.html create mode 100644 files/de/web/api/body/index.html create mode 100644 files/de/web/api/body/json/index.html create mode 100644 files/de/web/api/body/text/index.html (limited to 'files/de/web/api/body') diff --git a/files/de/web/api/body/arraybuffer/index.html b/files/de/web/api/body/arraybuffer/index.html new file mode 100644 index 0000000000..7550dfadc8 --- /dev/null +++ b/files/de/web/api/body/arraybuffer/index.html @@ -0,0 +1,87 @@ +--- +title: Body.arrayBuffer() +slug: Web/API/Body/arrayBuffer +translation_of: Web/API/Body/arrayBuffer +--- +
{{APIRef("Fetch")}}
+ +

Die Methode arrayBuffer() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.

+ +

Syntax

+ +
response.arrayBuffer().then(function(buffer) {
+  // mach etwas mit dem Buffer
+});
+ +

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

Ein Promise, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.

+ +

Beispiel

+ +

In unserem Live-Beispiel zum Abruf eines Array Buffers haben wir einen Wiedergabe-Knopf. Bei einem Klick darauf wird die Funktion getData() ausgeführt. Beachten Sie, dass vor der Wiedergabe die ganze Audio-Datei heruntergeladen wird. Benötigen Sie eine Wiedergabe noch während des Downloads (Streaming) ziehen Sie {{domxref("HTMLAudioElement")}} in Betracht:

+ +
new Audio(music.ogg).play()
+
+ +

In getData() erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor, um dann einen OGG Musik-Track abzurufen. Wir benutzen ebenfalls {{domxref("AudioContext.createBufferSource")}} um eine Audio-Puffer-Quelle zu erstellen. Ist der Abruf erfolgreich, lesen wir mit arrayBuffer() einen {{domxref("ArrayBuffer")}} aus der Antwort, dekodieren die Audiodaten mit {{domxref("AudioContext.decodeAudioData")}}, setzen die dekodierten Daten als Quelle für den Audio-Puffer fest und verbinden die Quelle mit {{domxref("AudioContext.destination")}}.

+ +

Wenn getData() durchgelaufen ist, starten wir die Wiedergabe mit start(0) und deaktivieren den Wiedergabe-Knopf, damit er nicht erneut geklickt werden kann, während die Wiedergabe läuft (was zu einem Fehler führen würde).

+ +
function getData() {
+  source = audioCtx.createBufferSource();
+
+  var myRequest = new Request('viper.ogg');
+
+  fetch(myRequest).then(function(response) {
+    return response.arrayBuffer();
+  }).then(function(buffer) {
+    audioCtx.decodeAudioData(buffer, function(decodedData) {
+      source.buffer = decodedData;
+      source.connect(audioCtx.destination);
+    });
+  });
+};
+
+// Knöpfe zum Abspielen und Anhalten verknüpfen
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.arrayBuffer")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/blob/index.html b/files/de/web/api/body/blob/index.html new file mode 100644 index 0000000000..53595fdbda --- /dev/null +++ b/files/de/web/api/body/blob/index.html @@ -0,0 +1,73 @@ +--- +title: Body.blob() +slug: Web/API/Body/blob +translation_of: Web/API/Body/blob +--- +
{{APIRef("Fetch")}}
+ +

Die Methode blob() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.

+ +

Syntax

+ +
response.blob().then(function(myBlob) {
+  // mach etwas mit myBlob
+});
+ +

Parameter

+ +

Keine.

+ +
Hinweis: Wenn die {{domxref("Response")}} vom {{domxref("Response.type")}} her "opaque" ist, hat der resultierende {{domxref("Blob")}} eine {{domxref("Blob.size")}} von 0 und einen {{domxref("Blob.type")}} eines leeren Strings "", wodurch er für Methoden wie {{domxref("URL.createObjectURL")}} unbrauchbar wird.
+ +

Rückgabewert

+ +

Ein Promise, welches in einen {{domxref("Blob")}} aufgelöst wird.

+ +

Beispiel

+ +

In unserem Beispiel für eine Fetch Anfrage (live ausführen) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit blob() einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-blob','blob()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.blob")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/body/index.html b/files/de/web/api/body/body/index.html new file mode 100644 index 0000000000..cbe7484d91 --- /dev/null +++ b/files/de/web/api/body/body/index.html @@ -0,0 +1,86 @@ +--- +title: Body.body +slug: Web/API/Body/body +translation_of: Web/API/Body/body +--- +
{{APIRef("Fetch")}}{{seecompattable}}
+ +

Die schreibgeschützte body Eigenschaft des {{domxref("Body")}} Mixin ist ein einfacher Getter, der dazu benutzt wird den Inhalt des Body als {{domxref("ReadableStream")}} bereitzustellen.

+ +

Syntax

+ +
var stream = responseInstance.body;
+ +

Wert

+ +

Ein {{domxref("ReadableStream")}}.

+ +

Beispiel

+ +

In unserem einfachen Stream-Pump-Beispiel rufen wir ein Bild ab, machen den Antwort-Stream mit response.body sichtbar, erstellen einen Reader mit {{domxref("ReadableStream.getReader()")}} und reihen die Teile des Streams in einen zweiten, benutzerdefinierten, lesbaren Stream — wodurch wie eine exakte Kopie des Bilds erhalten.

+ +
const image = document.getElementById('target');
+
+// Bild holen
+fetch('./tortoise.png')
+// Body als ReadableStream abrufen
+.then(response => response.body)
+.then(body => {
+  const reader = body.getReader();
+
+  return new ReadableStream({
+    start(controller) {
+      return pump();
+
+      function pump() {
+        return reader.read().then(({ done, value }) => {
+          // Stream schließen, wenn keine weiteren Daten verarbeitet werden müssen
+          if (done) {
+            controller.close();
+            return;
+          }
+
+          // Das nächste Datenstück in unseren Ziel-Stream einreihen
+          controller.enqueue(value);
+          return pump();
+        });
+      }
+    }
+  })
+})
+.then(stream => new Response(stream))
+.then(response => response.blob())
+.then(blob => URL.createObjectURL(blob))
+.then(url => console.log(image.src = url))
+.catch(err => console.error(err));
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-body','body')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.body")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/bodyused/index.html b/files/de/web/api/body/bodyused/index.html new file mode 100644 index 0000000000..052e8fcc7c --- /dev/null +++ b/files/de/web/api/body/bodyused/index.html @@ -0,0 +1,73 @@ +--- +title: Body.bodyUsed +slug: Web/API/Body/bodyUsed +translation_of: Web/API/Body/bodyUsed +--- +
{{APIRef("Fetch")}}
+ +

Die schreibgeschützte bodyUsed Eigenschaft des {{domxref("Body")}} Mixin enthält einen {{domxref("Boolean")}} der angibt, ob der Body schon eingelesen wurde.

+ +

Syntax

+ +
var myBodyUsed = response.bodyUsed;
+ +

Wert

+ +

Ein {{domxref("Boolean")}}.

+ +

Beispiel

+ +

In unserem Beispiel für eine Fetch Anfrage (live ausführen) erstellen wir eine neue Anforderung mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit blob() einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.

+ +

Beachten Sie, dass wir response.bodyUsed vor dem Aufruf von response.blob () und einmal danach in der Konsole protokollieren. Dies gibt vorher false zurück und anschließend true, da der Body ab diesem Punkt gelesen wurde.

+ +

HTML Inhalt

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

JavaScript Inhalt

+ +
var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) {
+    console.log(response.bodyUsed);
+    var res = response.blob();
+    console.log(response.bodyUsed);
+    return res;
+}).then(function(response) {
+    var objectURL = URL.createObjectURL(response);
+    myImage.src = objectURL;
+});
+ +

{{ EmbedLiveSample('Example', '100%', '250px') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-bodyused','bodyUsed')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.bodyUsed")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/formdata/index.html b/files/de/web/api/body/formdata/index.html new file mode 100644 index 0000000000..4ceb02aeb4 --- /dev/null +++ b/files/de/web/api/body/formdata/index.html @@ -0,0 +1,62 @@ +--- +title: Body.formData() +slug: Web/API/Body/formData +translation_of: Web/API/Body/formData +--- +
{{APIRef("Fetch")}}
+ +

Die Methode formData() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.

+ +
+

Hinweis: Dies ist hauptsächlich für Service Worker relevant. Wenn ein Benutzer ein Formular absendet und ein Service Worker die Anfrage abfängt, könnten Sie bspw. formData() aufrufen, um eine Key-Value-Abbildung zu erhalten, einige Felder zu modifizieren und das Formular dann an den Server weiterzuschicken (oder lokal zu benutzen).

+
+ +

Syntax

+ +
response.formData()
+.then(function(formdata) {
+  // machen Sie etwas mit Ihren Formulardaten
+});
+ +

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

Ein Promise, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.

+ +

Beispiel

+ +

Wird nachgereicht.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.formData")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/index.html b/files/de/web/api/body/index.html new file mode 100644 index 0000000000..3693a73653 --- /dev/null +++ b/files/de/web/api/body/index.html @@ -0,0 +1,99 @@ +--- +title: Body +slug: Web/API/Body +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - request +translation_of: Web/API/Body +--- +
{{ APIRef("Fetch") }}
+ +

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

+ +

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

+ +

Properties

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
A {{domxref("Boolean")}} that indicates whether the body has been read.
+
+ +

Methods

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
+
{{domxref("Body.blob()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
+
{{domxref("Body.formData()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
+
{{domxref("Body.json()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
+
{{domxref("Body.text()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
+
+ +

Examples

+ +

The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

+ +

HTML Content

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

JS Content

+ +
const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res => res.blob())
+	.then(res => {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});
+ +

{{ EmbedLiveSample('Examples', '100%', '250px') }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.Body")}}

+ +

See also

+ + + +

 

diff --git a/files/de/web/api/body/json/index.html b/files/de/web/api/body/json/index.html new file mode 100644 index 0000000000..76271e680d --- /dev/null +++ b/files/de/web/api/body/json/index.html @@ -0,0 +1,73 @@ +--- +title: Body.json() +slug: Web/API/Body/json +translation_of: Web/API/Body/json +--- +
{{APIRef("Fetch")}}
+ +

Die Methode json() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.

+ +

Syntax

+ +
response.json().then(function(data) {
+  // mach etwas mit data
+});
+ +

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

Ein Promise, welches den Inhalt des Body als {{jsxref("JSON")}} einliest. Dies kann alles sein, was als JSON abgebildet werden kann — ein Objekt, ein Array, ein String, eine Zahl...

+ +

Beispiel

+ +

In unserem Beispiel für den Abruf eines json (live ausführen) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine .json Datei ab. Wenn der Abruf erfolgreich ist lesen wir die Daten ein und parsen sie mit json(), lesen die Werte erwartungsgemäß aus und fügen sie in eine Liste ein um unsere Produktdaten anzuzeigen.

+ +
var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(function(response) { return response.json(); })
+  .then(function(data) {
+    for (var i = 0; i < data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '<strong>' + data.products[i].Name + '</strong> befindet sich in ' +
+                           data.products[i].Location +
+                           '. Preis: <strong>' + data.products[i].Price + '€</strong>';
+      myList.appendChild(listItem);
+    }
+  });
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-json','json()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.json")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/text/index.html b/files/de/web/api/body/text/index.html new file mode 100644 index 0000000000..8ccc5fb358 --- /dev/null +++ b/files/de/web/api/body/text/index.html @@ -0,0 +1,80 @@ +--- +title: Body.text() +slug: Web/API/Body/text +translation_of: Web/API/Body/text +--- +
{{APIRef("Fetch")}}
+ +

Die Methode text() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("USVString")}} Objekt (Text) aufgelöst wird. Die Antwort wird immer mit UTF-8 dekodiert.

+ +

Syntax

+ +
response.text().then(function (text) {
+  // do something with the text response
+});
+ +

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

Ein Promise, welches in einen {{domxref("USVString")}} aufgelöst wird.

+ +

Beispiel

+ +

In unserem Beispiel für den Abruf von Text (live ausführen) haben wir ein {{htmlelement("article")}} Element und drei Links (im Array myLinks gespeichert). Zuerst durchlaufen wir all diese, damit alle einen onclick Event Handler bekommen, der die Funktion getData() ausführt — der Bezeichner data-page des Links wird dabei als Argument übergeben — wenn einer der Links geklickt wird.

+ +

Wenn getData() ausgeführt wird erstellen wie eine Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine .txt Datei ab. Wenn der Abruf erfolgreich ist lesen wir das {{jsxref("USVString")}} (Text) Objekt aus der Antwort mit text() und setzen dann {{domxref("Element.innerHTML","innerHTML")}} des {{htmlelement("article")}} Elements auf den Wert des Text-Objekts.

+ +
var myArticle = document.querySelector('article');
+var myLinks = document.querySelectorAll('ul a');
+
+for(i = 0; i <= myLinks.length-1; i++) {
+  myLinks[i].onclick = function(e) {
+    e.preventDefault();
+    var linkData = e.target.getAttribute('data-page');
+    getData(linkData);
+  }
+};
+
+function getData(pageId) {
+  console.log(pageId);
+  var myRequest = new Request(pageId + '.txt');
+  fetch(myRequest).then(function(response) {
+    return response.text().then(function(text) {
+      myArticle.innerHTML = text;
+    });
+  });
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-text','text()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.text")}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf