From b0a393384aa4021c915e6a650c75ff328a054cb2 Mon Sep 17 00:00:00 2001 From: MDN Date: Thu, 1 Jul 2021 00:37:12 +0000 Subject: [CRON] sync translated content --- files/fr/orphaned/web/api/body/index.html | 97 ++++++++++++++++++++++++++ files/fr/orphaned/web/api/body/json/index.html | 87 +++++++++++++++++++++++ 2 files changed, 184 insertions(+) create mode 100644 files/fr/orphaned/web/api/body/index.html create mode 100644 files/fr/orphaned/web/api/body/json/index.html (limited to 'files/fr/orphaned/web/api') diff --git a/files/fr/orphaned/web/api/body/index.html b/files/fr/orphaned/web/api/body/index.html new file mode 100644 index 0000000000..89c70bbba0 --- /dev/null +++ b/files/fr/orphaned/web/api/body/index.html @@ -0,0 +1,97 @@ +--- +title: Body +slug: orphaned/Web/API/Body +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - Interface + - Reference + - TopicStub + - request +translation_of: Web/API/Body +original_slug: Web/API/Body +--- +
{{ APIRef("Fetch") }}
+ +

Le {{glossary("mixin")}} Body de l'API Fetch représente le corps de d'une requête ou d'une réponse, vous permettant de déclarer le type de son contenu et comment le manipuler.

+ +

Body est implémenté par {{domxref("Request")}} et {{domxref("Response")}}. Ces derniers fournissent un objet avec un un corps associé (un stream), un drapeaux pour indiquer si le corps a déjà été utilisé (initialisé à faux), et un type MIME (au début, une séquence vide d'octet).

+ +

Propriétés

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
Un simple getter utilisé pour obtenir un {{domxref("ReadableStream")}} du contenu.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Un {{jsxref("Boolean")}} qui indique si le corps a déjà été lu.
+
+ +

Méthodes

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Prend un flux {{domxref("Response")}}, le lit en entier, et le retourne sous forme d'un {{jsxref("ArrayBuffer")}} au travers d'une promesse.
+
{{domxref("Body.blob()")}}
+
Prends un flux {{domxref("Response")}}, le lit en entier, et le retourne dans un {{domxref("Blob")}} au travers d'une promesse.
+
{{domxref("Body.formData()")}}
+
Prends un flux {{domxref("Response")}}, le lit en entier, et le retourne dans un objet {{domxref("FormData")}} au travers d'une promesse.
+
{{domxref("Body.json()")}}
+
Prends un flux {{domxref("Response")}}, le lit en entier et retourne une promesse résolue avec le résultat textuel interprété comme du {{jsxref("JSON")}}.
+
{{domxref("Body.text()")}}
+
Prend un flux {{domxref("Response")}}, le lit en entier, et le retourne dans une {{domxref("USVString")}} (texte) au travers d'une promesse. La réponse est toujours décodée en utilisant l'UTF-8.
+
+ +

Exemples

+ +

L'exemple suivant utilise un simple appel fetch pour récupérer une image et l'afficher dans un élément {{htmlelement("img")}}. Notez qu'une fois l'image téléchargée, nous devons appeler {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implémente body) pour connaître le MIME type correcte.

+ +

Code HTML

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

Code JavaScript

+ +
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') }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationsStatusCommentaire
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/api/body/json/index.html b/files/fr/orphaned/web/api/body/json/index.html new file mode 100644 index 0000000000..923ef65ebf --- /dev/null +++ b/files/fr/orphaned/web/api/body/json/index.html @@ -0,0 +1,87 @@ +--- +title: Body.json() +slug: orphaned/Web/API/Body/json +tags: + - API + - BODY + - Experimental + - Fetch + - JSON + - Méthode + - Reference +translation_of: Web/API/Body/json +original_slug: Web/API/Body/json +--- +
{{APIRef("Fetch")}}
+ +

La méthode json() de {{domxref("Body")}} lit un Stream {{domxref("Response")}} jusqu'au bout. Elle retourne une promesse qui s'auto-résout en renvoyant le corps de la requête parsée au format {{jsxref("JSON")}}.

+ +

Syntaxe

+ +
response.json().then(function(data) {
+  // faire quelque chose avec les données
+});
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Une promesse résolue contenant le corps de la requête (au format JSON) converti sous la forme d'un objet JavaScript. Cet objet peut correspondre à n'importe quel contenu représentable dans le format JSON -- un objet, un tableau, une chaîne de caractère, un nombre…

+ +

Exemple

+ +

Dans l'exemple fetch json (lancer cet exemple), nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request", "Request()")}}, puis utilisons celle-ci pour récupérer un fichier .json. Lorsque l'appel à fetch réussit, on lit les données et on les parse en utilisant json() pour les convertir en un objet JS, puis enfin on utilise les valeurs de l'objet obtenu pour les insérer dans une liste de noeuds, de manière à afficher nos produits. 

+ +
const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response => response.json())
+  .then(data => {
+    for (const product of data.products) {
+      let listItem = document.createElement('li');
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = product.Name;
+      listItem.append(
+        ` can be found in ${
+          product.Location
+        }. Cost: `
+      );
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = `£${product.Price}`;
+      myList.appendChild(listItem);
+    }
+  });
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('Fetch','#dom-body-json','Body.json()')}}{{Spec2('Fetch')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

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