From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/request/credentials/index.html | 67 +++++++++ files/fr/web/api/request/index.html | 173 ++++++++++++++++++++++++ files/fr/web/api/request/mode/index.html | 61 +++++++++ files/fr/web/api/request/request/index.html | 160 ++++++++++++++++++++++ 4 files changed, 461 insertions(+) create mode 100644 files/fr/web/api/request/credentials/index.html create mode 100644 files/fr/web/api/request/index.html create mode 100644 files/fr/web/api/request/mode/index.html create mode 100644 files/fr/web/api/request/request/index.html (limited to 'files/fr/web/api/request') diff --git a/files/fr/web/api/request/credentials/index.html b/files/fr/web/api/request/credentials/index.html new file mode 100644 index 0000000000..36d1215c39 --- /dev/null +++ b/files/fr/web/api/request/credentials/index.html @@ -0,0 +1,67 @@ +--- +title: Request.credentials +slug: Web/API/Request/credentials +tags: + - API + - Propriété + - Reference + - request +translation_of: Web/API/Request/credentials +--- +
{{APIRef("Fetch")}}
+ +

La propriété en lecture seule credentials, de l'interface {{domxref("Request")}}, indique si l'agent utilisateur doit envoyer des cookies de l'autre domaine dans le cas de requêtes CORS. Ceci est similaire au flag withCredentials de XHR, mais peut prendre trois valeurs possibles (contre deux pour XHR) :

+ + + +

Syntaxe

+ +
var myCred = request.credentials;
+ +

Valeur

+ +

Une valeur {{domxref("RequestCredentials")}} qui représente les informations d'authentification utilisées pour cette transaction.

+ +

Exemples

+ +

Dans le morceau de code suivant, on crée une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour un fichier image dans le même dossier que le script), puis on enregistre les identifiants de la requête dans une variable:

+ +
var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // renvoie "same-origin" par défaut
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Fetch','#dom-request-credentials','credentials')}}{{Spec2('Fetch')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Request.credentials")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/request/index.html b/files/fr/web/api/request/index.html new file mode 100644 index 0000000000..c90b8278b0 --- /dev/null +++ b/files/fr/web/api/request/index.html @@ -0,0 +1,173 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Experimental + - Fetch + - Fetch API + - Interface + - Reference + - TopicStub + - request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch API")}}
+ +

L'interface Request de l'API Fetch représente une demande de ressource.

+ +

Vous pouvez créer un nouvel objet Request en utilisant le constructeur {{domxref("Request.Request","Request()")}}, mais vous êtes plus susceptible de rencontrer un objet Request renvoyé à la suite d'une autre opération d'API, telle en tant que service worker {{domxref("FetchEvent.request")}}.

+ +

Constructeur

+ +
+
{{domxref("Request.Request","Request()")}}
+
Crée un nouvel objet Request.
+
+ +

Propriétés

+ +
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
Contient le mode de cache de la demande (par exemple, default, reload, no-cache).
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
Contient le contexte de la demande (par exemple, audio, image, iframe, etc.)
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
Contient les informations d'identification de la demande (par exemple, omit, same-origin, include). La valeur par défaut est same-origin.
+
{{domxref("Request.destination")}} {{ReadOnlyInline}}
+
Renvoie une chaîne de l'énumération {{domxref("RequestDestination")}} décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé.
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
Contient l'objet {{domxref("Headers")}} associé de la requête.
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
Contient la valeur d'intégrité de la sous-ressource de la demande (par exemple, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
+
{{domxref("Request.method")}} {{readonlyInline}}
+
Contient la méthode de la requête (GET, POST, etc).
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
Contient le mode de la demande (par exemple, cors, no-cors, same-origin, navigate.)
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
Contient le mode de gestion des redirections. Il peut s'agir d'un follow, error, ou d'un manual.
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
Contient le référent de la demande (par exemple, client).
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
Contient la politique de référent de la demande (par exemple, no-referrer).
+
{{domxref("Request.url")}} {{readonlyInline}}
+
Contient l'URL de la demande.
+
+ +

Request implémente {{domxref("Body")}}, donc il hérite également des propriétés suivantes:

+ +
+
{{domxref("Body.body", "body")}} {{readonlyInline}}
+
Un getter simple utilisé pour exposer un {{domxref("ReadableStream")}} du contenu du corps.
+
{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}
+
Stocke un {{domxref("Boolean")}} qui déclare si le corps a déjà été utilisé dans une réponse.
+
+ +

Méthodes

+ +
+
{{domxref("Request.clone()")}}
+
Crée une copie de l'objet Request actuel.
+
+ +

Request implémente {{domxref("Body")}}, donc il dispose également des méthodes suivantes:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("ArrayBuffer")}} du corps de la requête.
+
{{domxref("Body.blob()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("Blob")}} du corps de la requête.
+
{{domxref("Body.formData()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("FormData")}} du corps de la requếte.
+
{{domxref("Body.json()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("JSON")}} du corps de la requête.
+
{{domxref("Body.text()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("USVString")}} (texte) du coprs de la requête.
+
+ +
+

Note: Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.

+
+ +

Exemples

+ +

Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur Request() (pour un fichier image dans le même répertoire que le script), puis renvoyons certaines valeurs de propriété de la requête:

+ +
const request = new Request('https://www.mozilla.org/favicon.ico');
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+
+ +

Vous pouvez ensuite récupérer cette requête en passant l'objet Request en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple:

+ +
fetch(request)
+  .then(response => response.blob())
+  .then(blob => {
+    image.src = URL.createObjectURL(blob);
+  });
+ +

Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur Request() avec des données initiales et du contenu du body pour une requête api qui nécessite une charge utile de body:

+ +
const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+const bodyUsed = request.bodyUsed;
+
+ +
+

Note: Le type de body ne peut être qu'un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}} donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet.

+
+ +

Vous pouvez ensuite récupérer cette demande d'API en passant l'objet Request en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse:

+ +
fetch(request)
+  .then(response => {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response => {
+    console.debug(response);
+    // ...
+  }).catch(error => {
+    console.error(error);
+  });
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/request/mode/index.html b/files/fr/web/api/request/mode/index.html new file mode 100644 index 0000000000..1e1c82d317 --- /dev/null +++ b/files/fr/web/api/request/mode/index.html @@ -0,0 +1,61 @@ +--- +title: Request.mode +slug: Web/API/Request/mode +translation_of: Web/API/Request/mode +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

La propriété mode (en lecture seule) de l’interface {{domxref("Request")}} contient le mode de la requête (e.g., cors, no-cors, cors-with-forced-preflight, same-origin, or navigate.) Ceci est utilisé pour déterminer si les requêtes différentes de l’origine (cross-origin) mèneront à des réponses valides, et quelles propriétés de la réponse seront lisibles:

+ + + +

Syntaxe

+ +
var myMode = request.mode;
+ +

Valeur

+ +

Une valeur {{domxref("RequestMode")}}.

+ +

Exemple

+ +

Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}}  (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable:

+ +
var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // returns "cors" by default
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Fetch','#dom-request-mode', 'mode')}}{{Spec2('Fetch')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Request.mode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/request/request/index.html b/files/fr/web/api/request/request/index.html new file mode 100644 index 0000000000..1eca86dcda --- /dev/null +++ b/files/fr/web/api/request/request/index.html @@ -0,0 +1,160 @@ +--- +title: Request() +slug: Web/API/Request/Request +tags: + - API + - Constructeur + - Experimental + - Fetch + - Reference + - request +translation_of: Web/API/Request/Request +--- +
{{APIRef("Fetch API")}}
+ +

Le constructeur Request() crée un nouvel objet {{domxref("Request")}}.

+ +

Syntaxe

+ +
var maRequete = new Request(entree[, init]);
+ +

Paramètres

+ +
+
entree
+
Définit la ressource que vous souhaitez récupérer. Cela peut être soit : +
    +
  • Une {{domxref("USVString")}} contenant l'URL directe de la ressource que vous voulez récupérer.
    • +
  • Un objet {{domxref("Request")}}, ce qui crée en fait une copie. Notez les mises à jour de comportement suivantes pour conserver la sécurité, tout en rendant le constructeur moins susceptible de déclencher des exceptions : +
      +
    • Si cet objet existe depuis une autre origine lors de l'appel du constructeur, le {{domxref("Request.referrer")}} est enlevé.
      • +
    • Si cet objet a un {{domxref("Request.mode")}} à navigate, la valeur de mode est convertie en same-origin.
      • +
    +
    • +
+
+
init {{optional_inline}}
+
Un objet d'options contenant tous les paramètres personnalisés que vous voulez appliquer à la requête. Les options possibles sont : +
    +
  • method: La méthode de la requête, par ex., GET, POST.
    • +
  • headers: Tous les entêtes que vous voulez ajouter à votre requête, contenus dans un objet {{domxref("Headers")}} ou un littéral d'objet avec des valeurs {{domxref("ByteString")}}.
    • +
  • body: Tout corps que vous voulez ajouter à votre requête : cela peut être un objet {{domxref ("Blob")}}, {{domxref ("BufferSource")}}, {{domxref ("FormData")}}, {{domxref ("URLSearchParams")}}, {{domxref ("USVString")}} ou {{domxref ("ReadableStream")}}. Notez qu'une requête utilisant la méthode GET ou HEAD ne peut pas avoir de corps .
    • +
  • mode: Le mode que vous souhaitez utiliser pour la requête, par exemple, cors, no-cors, same-origin, ou navigate. La valeur par défaut est cors. Dans Chrome, la valeur par défaut est no-cors avant Chrome 47 et same-origin à partir de Chrome 47.
    • +
  • credentials: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : omit, same-origin, ou include. La valeur par défaut est omit. Dans Chrome, la valeur par défaut est same-origin avant Chrome 47 et include à partir de Chrome 47.
    • +
  • cache: Le mode de cache que vous voulez utiliser pour la requête.
    • +
  • redirect: Le mode de redirection à utiliser : follow, error, ou manual. Dans Chrome, le défaut est manual avant Chrome 47 et follow à partir de Chrome 47.
    • +
  • referrer: Une {{domxref("USVString")}} indiquant no-referrer, client, ou une URL. La valeur par défaut est client.
    • +
  • integrity: Contient la valeur d'intégrité de la sous ressource de la requête (par ex.., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • +
+
+
+ +

Erreurs

+ + + + + + + + + + + + + + +
TypeDescription
TypeErrorDepuis Firefox 43, Request() déclenchera une TypeError si l'URL contient des informations d'authentification, comme dans http://user:password@example.com.
+ +

Exemple

+ +

Dans notre exemple de Fetch Request (voir Fetch Request en direct), nous créons un nouvel objet Request en utilisant le constructeur, puis nous le récupérons en utilisant un appel à {{domxref ("GlobalFetch.fetch")}}. Puisque nous récupérons une image, nous lançons {{domxref ("Body.blob")}} sur la réponse pour lui donner le bon type MIME afin qu'il soit géré correctement, puis nous en créons une

+ +

Object URL et nous l'affichons dans un élément {{htmlelement ("img")}}.

+ +
var monImage = document.querySelector('img');
+
+var maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete).then(function(reponse) {
+  return reponse.blob();
+}).then(function(reponse) {
+  var URLdobjet = URL.createObjectURL(reponse);
+  monImage.src = URLdobjet;
+});
+ +

Dans notre exemple de Fetch Request avec init (see Fetch Request init en direct), nous faisons la même chose, excepté que nous passons un objet init quand nous invoquons fetch():

+ +
var monImage = document.querySelector('img');
+
+var mesEntetes = new Headers();
+mesEntetes.append('Content-Type', 'image/jpeg');
+
+var monInit = { method: 'GET',
+               headers: mesEntetes,
+               mode: 'cors',
+               cache: 'default' };
+
+var maRequete = new Request('fleurs.jpg',monInit);
+
+fetch(maRequete).then(function(reponse) {
+  ...
+});
+ +

Notez que vos pouvez aussi passer l'objet init dans l'appel à fetch pour obtenir le même résultat, par ex. :

+ +
fetch(maRequete,monInit).then(function(reponse) {
+  ...
+});
+ +

Vous pouvez aussi utilier un littéral d'objet tel que headers dans init.

+ +
var monInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var maRequete = new Request('fleurs.jpg', monInit);
+
+ +

Vous pouvez aussi passer un objet {{domxref("Request")}} au constructeur Request() pour créer une copie de la Request (c'est similaire au fait d'appeler la méthode {{domxref("Request.clone","clone()")}}).

+ +
+
var copie = new Request(maRequete);
+
+
+ +
+

Note : Cette dernière utilisation n'est probablement utile que dans ServiceWorkers.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Fetch','#dom-request','Request()')}}{{Spec2('Fetch')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

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