Request : constructeur Request()

Syntaxe

new Request(input)
new Request(input, options)

Paramètres

input

Définit la ressource que vous souhaitez récupérer. Cela peut être :

• Une chaîne de caractères contenant l'URL de la ressource que vous souhaitez récupérer. L'URL peut être relative à l'URL de base, qui est le baseURI du document dans un contexte de fenêtre, ou WorkerGlobalScope.location dans un contexte de worker.
• Un objet Request, créant effectivement une copie. Notez les mises à jour comportementales suivantes pour conserver la sécurité tout en rendant le constructeur moins susceptible de produire des exceptions :
  • Si cet objet existe sur une autre origine que l'appel du constructeur, le Request.referrer est supprimé.
  • Si cet objet a un Request.mode de navigate, la valeur de mode est convertie en same-origin.

options Facultatif

Un objet RequestInit contenant tous les paramètres personnalisés que vous souhaitez appliquer à la requête.

Si vous construisez un nouveau Request à partir d'un Request existant, toutes les options que vous définissez dans un argument options pour la nouvelle requête remplacent toutes les options correspondantes définies dans le Request d'origine. Par exemple :

js

const ancienneRequete = new Request(
  "https://github.com/mdn/content/issues/12959",
  { headers: { From: "webmaster@exemple.org" } },
);
ancienneRequete.headers.get("From"); // "webmaster@exemple.org"
const nouvelleRequete = new Request(ancienneRequete, {
  headers: { From: "developer@exemple.org" },
});
nouvelleRequete.headers.get("From"); // "developer@exemple.org"

Exceptions

NotAllowedError DOMException

Levée si :

• L'utilisation de la Topics API est explicitement interdite par une browsing-topics politique d'autorisations, et browsingTopics est défini à true.
• L'utilisation des opérations de l'API Private State Token est explicitement interdite par une private-state-token-issuance ou private-state-token-redemption politique d'autorisations, et l'option privateToken est définie, y compris un type d'opération privateToken.operation non autorisé.

TypeError

Levée si :

• L'URL contient des identifiants, comme http://utilisateur:motdepasse@exemple.com, ou ne peut pas être analysée.
• L'option d'initialisation privateToken est définie, y compris un type privateToken.operation de send-redemption-record, et le tableau privateToken.issues était vide ou non défini, ou un ou plusieurs des issuers définis ne sont pas des URL HTTPS de confiance.

Exemple

Dans notre exemple de requête Fetch ^(angl.) (voir l'exemple en direct de requête Fetch ^(angl.)), nous créons un nouvel objet Request à l'aide du constructeur, puis nous le récupérons à l'aide d'un appel à fetch(). Comme nous récupérons une image, nous utilisons Response.blob sur la réponse pour lui donner le type MIME approprié afin qu'elle soit correctement traitée, puis nous créons une URL d'objet à partir de celle-ci et l'affichons dans un élément HTML <img>.

const monImage = document.querySelector("img");
const maRequete = new Request("fleurs.jpg");

fetch(maRequete)
  .then((reponse) => reponse.blob())
  .then((reponse) => {
    const urlObjet = URL.createObjectURL(reponse);
    monImage.src = urlObjet;
  });

Dans notre exemple de requête Fetch avec initialisation ^(angl.) (voir l'exemple en direct de requête Fetch avec initialisation ^(angl.)), nous faisons la même chose sauf que nous passons un objet options lors de l'appel à fetch(). Dans ce cas, nous pouvons définir une valeur Cache-Control pour indiquer le type de réponses en cache que nous acceptons :

const monImage = document.querySelector("img");
const entetesRequete = new Headers();

// Une réponse en cache est acceptable sauf si elle a plus d'une semaine.
entetesRequete.set("Cache-Control", "max-age=604800");

const options = {
  headers: entetesRequete,
};

// Passer init comme un objet "options" avec nos en-têtes
const requete = new Request("fleurs.jpg", options);

fetch(requete).then((reponse) => {
  // …
});

Notez que vous pouvez également passer options dans l'appel à fetch pour obtenir le même effet, par exemple :

fetch(requete, options).then((reponse) => {
  // …
});

Vous pouvez également utiliser un objet littéral comme headers dans options.

const options = {
  headers: {
    "Cache-Control": "max-age=60480",
  },
};

const requete = new Request("fleurs.jpg", options);

Vous pouvez également passer un objet Request au constructeur Request() pour créer une copie de la requête (Ceci est similaire à l'appel de la méthode clone()).

const copie = new Request(req);

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API ServiceWorker
• Le contrôle d'accès HTTP (CORS)
• La référence HTTP