Demande d’extraction : définie, globale

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 16 minutes de lecture

    • L’API Fetch Request contient des méthodes de création ou de récupération d’un objet Request pour permettre aux applications de demander de manière asynchrone des ressources, telles que des données JSON, texte ou binaires, à partir d’un serveur et de gérer la réponse. Cette API prend en charge diverses méthodes HTTP telles que GET, POST, PUT, DELETE, etc.

    Cette API fait partie d’un ensemble d’API d’extraction , qui fournissent diverses actions pour extraire des ressources à partir de sites web externes. La collection complète d’API d’extraction comprend :

    Pour prendre en charge les actions d’extraction, la propriété système glide.hosts.allowlist permet de contrôler les hôtes auxquels une méthode d’extraction peut accéder. Il s’applique aux API HTTP comme RestMessageV2 et celles mentionnées ci-dessus. Pour plus d’informations sur glide.hosts.allowlist, reportez-vous à la section Available system properties.

    Propriétés de la demande

    L’API Fetch Request prend en charge plusieurs propriétés en lecture seule qui offrent des informations détaillées sur une requête HTTP. Certains d’entre eux incluent l’url (l’URL de la demande), la méthode (la méthode HTTP), les en-têtes (les en-têtes associés) et le corps (le corps de la demande sous forme de flux). Les autres propriétés incluent les paramètres de mise en cache, les informations d’identification et les référents. Ces propriétés sont en lecture seule, ce qui signifie qu’elles peuvent être consultées, mais pas modifiées une fois la demande créée. Pour en savoir plus sur chaque propriété, reportez-vous à la section https://developer.mozilla.org/en-US/docs/Web/API/Request.

    Tableau 1. Propriétés de la demande
    Nom de la propriété Description Exemple
    body Propriété prête uniquement. Contient un flux lisible de données en octets avec le contenu du corps qui a été ajouté à la demande.

    Type/valeur de données : A ReadableStream ou null.

    		 
    const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.body; // ReadableStream
    bodyUsed Propriété prête uniquement. Marqueur indiquant si le corps de la demande a déjà été lu.
    Valeur acceptée :
    • vrai : le corps de la demande a été lu.
    • faux : le corps de la demande n’a pas été lu.

    Type de données : booléennes

    		 
    const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.bodyUsed; // false

request.text().then((bodyAsText) => {
  console.log(request.bodyUsed); // true
});
    cache Propriété prête uniquement. Contient le mode de cache de la demande, qui contrôle la façon dont la demande interagit avec le cache HTTP du navigateur.
    Valeurs acceptées :
    • par défaut : le navigateur recherche une requête correspondante dans son cache HTTP.
      • S’il y a une correspondance et qu’elle est fraîche, elle est renvoyée depuis le cache.
      • S’il existe une correspondance mais qu’elle est périmée, le navigateur envoie une demande conditionnelle au serveur distant. Si le serveur indique que la ressource n’a pas changé, elle est renvoyée depuis le cache. Sinon, la ressource est téléchargée à partir du serveur et le cache est mis à jour.
      • S’il n’y a pas de correspondance, le navigateur effectue une demande normale et met à jour le cache avec la ressource téléchargée.
    • force-cache : le navigateur recherche une requête correspondante dans son cache HTTP.
      • S’il y a une correspondance, récente ou périmée, elle est renvoyée depuis le cache.
      • S’il n’y a pas de correspondance, le navigateur effectue une requête normale et met à jour le cache avec la ressource téléchargée.
    • no-cache : le navigateur recherche une requête correspondante dans son cache HTTP.
      • S’il y a une correspondance, récente ou périmée, le navigateur envoie une demande conditionnelle au serveur distant. Si le serveur indique que la ressource n’a pas changé, elle est renvoyée depuis le cache. Sinon, la ressource est téléchargée à partir du serveur et le cache est mis à jour.
      • S’il n’y a pas de correspondance, le navigateur effectue une demande normale et met à jour le cache avec la ressource téléchargée.
    • no-store : le navigateur récupère la ressource du serveur distant sans d’abord regarder dans le cache, et ne met pas à jour le cache avec la ressource téléchargée.
    • only-if-cache : le navigateur recherche une requête correspondante dans son cache HTTP.
      • S’il y a une correspondance, récente ou périmée, elle est renvoyée depuis le cache.
      • S’il n’y a pas de correspondance, le navigateur répond avec l’état 504 Gateway timeout.

      Le mode uniquement si-mis en cache ne peut être utilisé que si le mode de la demande est d’origine identique. Les redirections mises en cache sont suivies si la propriété de redirection de la requête est follow et que les redirections ne violent pas le mode de même origine .

    • recharger : le navigateur extrait la ressource du serveur distant sans d’abord regarder dans le cache, mais met ensuite à jour le cache avec la ressource téléchargée.

    Type de données : chaîne

    		 
    // Download a resource with cache busting, to bypass the cache
// completely.
fetch("some.json", { cache: "no-store" }).then((response) => {
  /* consume the response */
});

// Download a resource with cache busting, but update the HTTP
// cache with the downloaded resource.
fetch("some.json", { cache: "reload" }).then((response) => {
  /* consume the response */
});

// Download a resource with cache busting when dealing with a
// properly configured server that will send the correct ETag
// and Date headers and properly handle If-Modified-Since and
// If-None-Match request headers, therefore we can rely on the
// validation to guarantee a fresh response.
fetch("some.json", { cache: "no-cache" }).then((response) => {
  /* consume the response */
});

// Download a resource with economics in mind! Prefer a cached
// albeit stale response to conserve as much bandwidth as possible.
fetch("some.json", { cache: "force-cache" }).then((response) => {
  /* consume the response */
});

// Naive stale-while-revalidate client-level implementation.
// Prefer a cached albeit stale response; but update if it's too old.
// AbortController and signal to allow better memory cleaning.
// In reality; this would be a function that takes a path and a
// reference to the controller since it would need to change the value
let controller = new AbortController();
fetch("some.json", {
  cache: "only-if-cached",
  mode: "same-origin",
  signal: controller.signal,
})
  .catch((e) =>
    e instanceof TypeError && e.message === "Failed to fetch"
      ? { status: 504 } // Workaround for chrome; which fails with a TypeError
      : Promise.reject(e),
  )
  .then((res) => {
    if (res.status === 504) {
      controller.abort();
      controller = new AbortController();
      return fetch("some.json", {
        cache: "force-cache",
        mode: "same-origin",
        signal: controller.signal,
      });
    }
    const date = res.headers.get("date"),
      dt = date ? new Date(date).getTime() : 0;
    if (dt < Date.now() - 86_400_000) {
      // if older than 24 hours
      controller.abort();
      controller = new AbortController();
      return fetch("some.json", {
        cache: "reload",
        mode: "same-origin",
        signal: controller.signal,
      });
    }

    // Other possible conditions
    if (dt < Date.now() - 300_000)
      // If it's older than 5 minutes
      fetch("some.json", { cache: "no-cache", mode: "same-origin" }); // no cancellation or return value.
    return res;
  })
  .then((response) => {
    /* consume the (possibly stale) response */
  })
  .catch((error) => {
    /* Can be an AbortError/DOMException or a TypeError */
  });
    informations d'identification Lecture seule. Reflète la valeur donnée au constructeur Request() dans l’option informations d’identification. Les informations d’identification sont des cookies, des certificats clients TLS ou des en-têtes d’authentification contenant un nom d’utilisateur et un mot de passe.
    Valeurs acceptées :
    • Include : incluez toujours les informations d’identification, même pour les demandes d’origine croisée.
    • Omettre : n’envoyez jamais d’informations d’identification dans la demande et n’incluez jamais d’informations d’identification dans la réponse.
    • same-origin : envoyez et incluez uniquement des informations d’identification pour les demandes de même origine.

    Type de données : chaîne

    		 
    const request = new Request("flowers.jpg");
const request = request.request; // returns "same-origin" by default
    destination Lecture seule. Renvoie une chaîne décrivant le type de contenu demandé.
    Valeurs acceptées :
    • audio : La cible est les données audio.
    • audioworklet : la cible est les données récupérées pour être utilisées par un worklet audio.
    • document : la cible est un document HTML ou XML.
    • embed : le tag est un contenu intégré.
    • cadre clôturé : La cible est un cadre clôturé.
    • police : La cible est une police.
    • frame : La cible est un frame.
    • iframe : la cible est un iframe.
    • image : La cible est une image.
    • json : la cible est un fichier JSON
    • manifest : la cible est un manifeste.
    • object : la cible est un objet.
    • paintworklet : la cible est un worklet de peinture.
    • rapport : la cible est un rapport.
    • script : la cible est un script.
    • sharedworker : la cible est un travailleur partagé.
    • style : La cible est un style.
    • track : La cible est un fichier HTML <track>.
    • vidéo : la cible est les données vidéo.
    • worker : la cible est un worker.
    • xslt : la cible est une transformation XSLT.

    Type de données : chaîne

    		 
    fetch('https://example.com/image.jpg', {
  destination: 'image'
})
  .then(response => response.blob())
  .then(blob => {
    console.log('Image fetched successfully', blob);
  })
  .catch(error => console.error('Error:', error));
    en-têtes Lecture seule. Objet En-têtes associé à la demande.

    Type de données : objet d’en-têtes

    		 
    const myRequest = new Request("flowers.jpg");
const myHeaders = myRequest.headers; // Headers {}
    Intégrité Lecture seule. La valeur d’intégrité de la sous-ressource de la demande.

    Valeur : valeur transmise comme argument lors de options.integrity la construction de la demande. Si une intégrité n’a pas été spécifiée, la propriété renvoie « ».

    		 
    const myRequest = new Request("flowers.jpg", {
  integrity: "sha256-abc123",
});
console.log(myRequest.integrity); // "sha256-abc123"
    isHistoryNavigation Lecture seule. Booléen indiquant si la demande est une navigation d’historique.
    Valeurs acceptées :
    • vrai : la demande est une navigation d’historique.
    • false : la demande n’est pas une navigation d’historique.

    Type de données : booléennes

    		 
    self.addEventListener("request", (event) => {
  // ...

  if (event.request.isHistoryNavigation) {
    event.respondWith(
      caches.match(event.request).then((response) => {
        if (response !== undefined) {
          return response;
        } else {
          return fetch(event.request).then((response) => {
            let responseClone = response.clone();

            caches.open("v1").then((cache) => {
              cache.put(event.request, responseClone);
            });

            return response;
          });
        }
      }),
    );
  }

  // ...
});
    keepalive Lecture seule. Le paramètre keepalive de la demande (vrai ou faux). Renvoie une chaîne vide si une valeur d’intégrité n’est pas transmise dans la demande.
    Valeurs acceptées :
    • vrai : le navigateur maintient la requête associée active si la page à l’origine est déchargée avant la fin de la requête.
    • faux : le navigateur ne maintient pas la demande associée active si la page qui l’a initiée est déchargée avant que la demande ne soit terminée.

    Type de données : booléennes

    		 
    const options = {
  keepalive: true,
};

const myRequest = new Request("flowers.jpg", options);
let myKeepAlive = myRequest.keepalive; // true
    method Lecture seule. La méthode de la demande (GET, POST, etc.)

    Type de données : chaîne

    		 
    const myRequest = new Request("flowers.jpg");
const myMethod = myRequest.method; // GET
    Mode Lecture seule. Mode de la demande. Utilisé pour déterminer si les demandes d’origines croisées mènent à des réponses valides et quelles propriétés de la réponse sont lisibles.
    Valeurs acceptées :
    • cors : si la demande est d’origine croisée, elle utilisera le mécanisme de partage des ressources d’origine croisée (CORS).
    • navigate : mode de prise en charge de la navigation. La valeur navigate est destinée à être utilisée uniquement par la navigation HTML. Une demande de navigation est créée uniquement lors de la navigation entre les documents.
    • no-cors : désactive CORS pour les demandes d’origines croisées. La réponse est opaque, ce qui signifie que ses en-têtes et son corps ne sont pas disponibles pour JavaScript.
    • same-origin : interdit les demandes cross-origin. Si une demande est effectuée vers une autre origine avec ce mode défini, le résultat est une erreur.

    Les demandes peuvent être lancées de différentes manières, et le mode d’une demande dépend du moyen particulier par lequel elle a été lancée. Par exemple, lorsqu’un objet Request est créé à l’aide du constructeur Request(), la valeur de la propriété mode pour cette demande est définie sur cors. Toutefois, pour les demandes créées autrement que par Request() constructeur, no-cors est généralement utilisé comme mode ; Par exemple, pour les ressources embarquées où la requête est initiée à partir d’un balisage, sauf si l’attribut crossorigin est présent, la requête est dans la plupart des cas effectuée en utilisant le mode no-cors — c’est-à-dire pour le <link> ou <script> elements (except when used with modules), or <img>, <audio>,<video>, <object>, <embed>, or <iframe> elements.

    Type de données : chaîne

    		 
    const myRequest = new Request("flowers.jpg");
const myMode = myRequest.mode; // returns "cors" by default
    Redirection Lecture seule. Mode de traitement des redirections.
    Valeurs valides :
    • erreur
    • suivre
    • Manuelle

    Type de données : chaîne

    Par défaut : follow

    		 
    const myRequest = new Request("flowers.jpg");
const myCred = myRequest.redirect;
    référant Lecture seule. Le référent de la demande (par exemple, client, no-reférer ou une URL). La valeur no-referrer renvoie une chaîne vide.

    Type de données : chaîne

    		 
    const myRequest = new Request("flowers.jpg");
const myReferrer = myRequest.referrer; // returns "about:client" by default
    referrerPolicy Lecture seule. La politique de référent qui régit les informations de référent envoyées dans l’en-tête de référent avec la demande.

    Type de données : chaîne

    		 
    const myRequest = new Request("flowers.jpg");
const myReferrer = myRequest.referrerPolicy; // returns "" by default
    signal Lecture seule. Signal d’abandon associé à la demande.

    Type de données : chaîne

    		 
    // Create a new abort controller
const controller = new AbortController();

// Create a request with this controller's AbortSignal object
const req = new Request("/", { signal: controller.signal });

// Add an event handler logging a message in case of abort
req.signal.addEventListener("abort", () => {
  console.log("abort");
});

// In case of abort, log the AbortSignal reason, if any
fetch(req).catch(() => {
  if (req.signal.aborted) {
    if (req.signal.reason) {
      console.log(`Request aborted with reason: ${req.signal.reason}`);
    } else {
      console.log("Request aborted but no reason was given.");
    }
  } else {
    console.log("Request not aborted, but terminated abnormally.");
  }
});

// Actually abort the request
controller.abort();
    URL Lecture seule. URL de la demande.

    Type de données : chaîne

    		 
    const myRequest = new Request("flowers.jpg");
const myURL = myRequest.url; // "https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request/flowers.jpg"

    Récupérer la demande : request()

    Crée un nouvel objet de demande. Vous pouvez également créer l’objet Request à partir d’une ressource d’URL ou d’objet.

    Tableau 2. Paramètres
    Nom Type Description
    entrée Chaîne ou objet Facultatif. La ressource à récupérer.

    Valeurs valides :

    • Une chaîne contenant l’URL de la ressource à extraire. L’API n’accepte pas les URL contenant des informations d’identification, telles que http://user.password.example.com. Une exception est levée si l’URL ne peut pas être analysée.
    • Objet de demande, créant ainsi une copie d’un objet de demande existant. La structure de l’objet est dictée par la classe Request.
      Remarque :
      Notez les mises à jour comportementales suivantes pour conserver la sécurité tout en rendant le constructeur moins susceptible de lever des exceptions :
      • Si cet objet existe sur une autre origine que l’appel du constructeur, la propriété Request.referrer est supprimée.
      • Si cet objet a une propriété Request.mode de navigation, la valeur de mode est convertie en même origine.
    options Objet Facultatif. Objet Extraire RequestInit : dans le champ d’application, global contenant tous les paramètres personnalisés à appliquer à la demande. Si vous créez une nouvelle demande à partir d’une demande existante, les options définies dans la nouvelle demande remplacent les options correspondantes de la demande initiale.

    Par défaut : renvoie les valeurs par défaut pour toutes les propriétés.

    L’exemple suivant montre comment créer un objet Request à l’aide du constructeur Request( ).

    var myImage = document.querySelector("img");
var myRequest = new Request("flowers.jpg");

    L’exemple suivant montre comment créer le nouvel objet Request à l’aide du paramètre input pour récupérer une URL ou un objet.

    var myImage = document.querySelector("img");
var myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => response.blob())
  .then((response) => {
    var objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });

    L’exemple suivant montre comment créer le nouvel objet Request avec des options d’en-tête à l’aide d’un littéral d’objet.

    var myImage = document.querySelector("img");
var myRequest = new Request("flowers.jpg");

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

    Demande d’extraction : arrayBuffer()

    Lit le corps de la demande et le renvoie sous forme de promesse qui se résout avec un arrayBuffer.

    Tableau 3. Paramètres
    Nom Type Description
    Aucun
    Tableau 4. Renvoie
    Type Description
    Promesse Une promesse qui se résout avec un arrayBuffer.

    Ce qui suit montre comment créer une nouvelle requête à l’aide de la méthode arrayBuffer( ).

    var myArray = new Uint8Array(10);

var request = new Request("/myEndpoint", {
  method: "POST",
  body: myArray,
});

request.arrayBuffer().then((buffer) => {
  // perform an action with the buffer sent in the request
});

    Demande d’extraction : blob()

    Lit le corps de la demande et le renvoie sous forme de promesse qui se résout par un objet blob.

    Tableau 5. Paramètres
    Nom Type Description
    Aucun
    Tableau 6. Renvoie
    Type Description
    Objet Une promesse qui se résout avec un blob.

    L’exemple suivant montre comment former une demande avec la méthode blob( ).

    var obj = { hello: "world" };
var myBlob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

var request = new Request("/myEndpoint", {
  method: "POST",
  body: myBlob,
});

request.blob().then((myBlob) => {
  // do something with the blob sent in the request
});

    Demande d’extraction : bytes()

    Lit le corps de la demande et le renvoie sous forme de promesse qui se résout avec un Uint8Array.

    Tableau 7. Paramètres
    Nom Type Description
    Aucun
    Tableau 8. Renvoie
    Type Description
    Objet Une promesse qui se résout avec un Uint8Array.

    Ce qui suit montre comment créer une nouvelle requête à l’aide de la méthode bytes( ).

    var myArray = new Uint8Array(10);

var request = new Request("/myEndpoint", {
  method: "POST",
  body: myArray,
});

request.bytes().then((buffer) => {
  // do something with the buffer sent in the request
});

    Demande d’extraction : clone()

    Crée une copie de l’objet de demande actuel.

    Tableau 9. Paramètres
    Nom Type Description
    Aucun
    Tableau 10. Renvoie
    Type Description
    Demander Un objet Request qui est une copie exacte de la requête pour laquelle clone() a été appelé. clone() génère une erreur si le corps de la requête a déjà été utilisé. Si vous souhaitez modifier la demande, utilisez le Récupérer la demande : request() constructeur.

    L’exemple suivant montre comment créer une nouvelle demande à l’aide de request(), puis la copier à l’aide de clone().

    var myRequest = new Request("flowers.jpg");
var newRequest = myRequest.clone(); // a copy of the request is now stored in newRequest

    Récupérer la demande : formData()

    Lit le corps de la demande et le renvoie en tant que promesse qui se résout avec un objet FormData.

    Tableau 11. Paramètres
    Nom Type Description
    Aucun
    Tableau 12. Renvoie
    Type Description
    Néant Une promesse qui se résout avec un objet FormData .

    L’exemple suivant montre comment créer une nouvelle demande à l’aide de request(), puis la résoudre avec la méthode formData() pour la résoudre en tant qu’objet FormData.

    var formData = new FormData();
var fileField = document.querySelector('input[type="file"]');

formData.append("username", "abc123");
formData.append("avatar", fileField.files[0]);

var request = new Request("/myEndpoint", {
  method: "POST",
  body: formData,
});

request.formData().then((data) => {
  // do something with the formdata sent in the request
});

    Récupérer la demande : json()

    Lit le corps de la demande, analyse le contenu au format JSON et renvoie une promesse qui se résout avec le résultat analysé.

    Tableau 13. Paramètres
    Nom Type Description
    Aucun
    Tableau 14. Renvoie
    Type Description
    Objet Promesse (l’achèvement ou l’échec éventuel d’une opération asynchrone et sa valeur résultante) qui se résout en un objet JavaScript. Cet objet peut être tout ce qui peut être représenté par JSON : un objet, un tableau, une chaîne, un nombre, etc.

    L’exemple suivant montre comment créer une nouvelle demande à l’aide de request() puis de json() pour analyser la demande et la renvoyer en tant qu’objet JSON.

    var obj = { hello: "world" };

var request = new Request("/myEndpoint", {
  method: "POST",
  body: JSON.stringify(obj),
});

request.json().then((data) => {
  // process the data sent in the request
});

    Demande d’extraction : text()

    Lit le corps de la demande et le renvoie en tant que promesse qui se résout avec une chaîne décodée en UTF-8.

    Tableau 15. Paramètres
    Nom Type Description
    Aucun
    Tableau 16. Renvoie
    Type Description
    Néant Une promesse qui se résout avec une chaîne au format UTF-8.

    Cet exemple montre comment appeler text().

    var text = "Hello world";

var request = new Request("/myEndpoint", {
  method: "POST",
  body: text,
});

request.text().then((text) => {
  // process the data sent in the request
});