// Exemple d'implémentation pour une requête POSTasync function postData(url = "", donnees = {}) {  // Les options par défaut sont indiquées par *  const response = await fetch(url, {    method: "POST", // *GET, POST, PUT, DELETE, etc.    mode: "cors", // no-cors, *cors, same-origin    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached    credentials: "same-origin", // include, *same-origin, omit    headers: {      "Content-Type": "application/json",      // 'Content-Type': 'application/x-www-form-urlencoded',    },    redirect: "follow", // manual, *follow, error    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url    body: JSON.stringify(donnees), // le type utilisé pour le corps doit correspondre à l'en-tête "Content-Type"  });  return response.json(); // transforme la réponse JSON reçue en objet JavaScript natif}postData("https://example.com/solution", { solution: 42 }).then((donnees) => {  console.log(donnees); // Les données JSON analysées par l'appel `donnees.json()`});

const controleur = new AbortController();const signal = controleur.signal;const url = "video.mp4";const btnTelechargement = document.querySelector("#telechargement");const btnInterruption = document.querySelector("#interrompre");btnTelechargement.addEventListener("click", async () => {  try {    const reponse = await fetch(url, { signal });    console.log("Téléchargement terminé", reponse);  } catch (error) {    console.error(`Erreur lors du téléchargement : ${error.message}`);  }});btnInterruption.addEventListener("click", () => {  controleur.abort();  console.log("Téléchargement interrompu");});

fetch("https://example.com", {  credentials: "include",});

Note :On ne pourra pas utiliserAccess-Control-Allow-Origin: * pour les requêtes aveccredentials: 'include'. Pour ces cas-là, il faut fournir l'origine exacte. Même si une extension de débridage du CORS est utilisée, la requête échouera.

Note :Les navigateurs ne devraient pas envoyer d'informations d'authentification dans lesrequêtes préparatoires (preflight requests), quelle que soit la valeur de cette option. Pour plus d'informations, voirla section de la page CORS sur les requêtes avec informations d'authentification.

// Le script qui appelle se situe sur l'origine 'https://example.com'fetch("https://example.com", {  credentials: "same-origin",});

fetch("https://example.com", {  credentials: "omit",});

async function postJSON(donnees) {  try {    const reponse = await fetch("https://example.com/profile", {      method: "POST", // ou 'PUT'      headers: {        "Content-Type": "application/json",      },      body: JSON.stringify(donnees),    });    const resultat = await reponse.json();    console.log("Réussite :", resultat);  } catch (erreur) {    console.error("Erreur :", erreur);  }}const donnees = { login: "Jean Biche" };postJSON(donnees);

async function upload(donneesFormulaires) {  try {    const reponse = await fetch("https://example.com/profile/avatar", {      method: "PUT",      body: donneesFormulaires,    });    const resultat = await reponse.json();    console.log("Réussite :", resultat);  } catch (erreur) {    console.error("Erreur :", erreur);  }}const donneesFormulaires = new FormData();const champFichier = document.querySelector('input[type="file"]');donneesFormulaires.append("username", "abc123");donneesFormulaires.append("avatar", champFichier.files[0]);upload(donneesFormulaires);

async function uploadMultiple(donneesFormulaires) {  try {    const reponse = await fetch("https://example.com/posts", {      method: "POST",      body: donneesFormulaires,    });    const resultat = await reponse.json();    console.log("Réussite :", resultat);  } catch (erreur) {    console.error("Erreur :", erreur);  }}const photos = document.querySelector('input[type="file"][multiple]');const donneesFormulaires = new FormData();donneesFormulaires.append("title", "Mes vacances");for (const [i, photo] of Array.from(photos.files).entries()) {  donneesFormulaires.append(`photos_${i}`, photo);}uploadMultiple(donneesFormulaires);

async function* makeTextFileLineIterator(fileURL) {  const utf8Decoder = new TextDecoder("utf-8");  const response = await fetch(fileURL);  const reader = response.body.getReader();  let { value: chunk, done: readerDone } = await reader.read();  chunk = chunk ? utf8Decoder.decode(chunk) : "";  const newline = /\r?\n/gm;  let startIndex = 0;  let result;  while (true) {    const result = newline.exec(chunk);    if (!result) {      if (readerDone) break;      const remainder = chunk.substr(startIndex);      ({ value: chunk, done: readerDone } = await reader.read());      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");      startIndex = newline.lastIndex = 0;      continue;    }    yield chunk.substring(startIndex, result.index);    startIndex = newline.lastIndex;  }  if (startIndex < chunk.length) {    // Last line didn't end in a newline char    yield chunk.substr(startIndex);  }}async function run() {  for await (const line of makeTextFileLineIterator(urlOfFile)) {    processLine(line);  }}run();

async function fetchImage() {  try {    const response = await fetch("flowers.jpg");    if (!response.ok) {      throw new Error("La réponse n'est pas OK");    }    const myBlob = await response.blob();    monImage.src = URL.createObjectURL(myBlob);  } catch (error) {    console.error("Un problème est survenu lors de la récupération :", error);  }}

async function fetchImage(request) {  try {    const response = await fetch(request);    if (!response.ok) {      throw new Error("La réponse n'est pas OK");    }    const monBlob = await response.blob();    monImage.src = URL.createObjectURL(monBlob);  } catch (error) {    console.error("Erreur :", error);  }}const mesEntetes = new Headers();const maRequete = new Request("flowers.jpg", {  method: "GET",  headers: mesEntetes,  mode: "cors",  cache: "default",});fetchImage(maRequete);

const uneAutreRequete = new Request(maRequete, monInit);

Note :Il existe également la méthodeclone() pour créer une copie. Ces deux méthodes de copie échoueront si le corps de la requête ou de la réponse originale a déjà été lu. En revanche, lire le corps d'une réponse ou d'une requête clonée ne modifiera pas l'état de lecture de l'original.

const contenu = "Coucou le monde";const mesEntetes = new Headers();mesEntetes.append("Content-Type", "text/plain");mesEntetes.append("Content-Length", contenu.length.toString());mesEntetes.append("X-Custom-Header", "ATraiterImmediatement");

const mesEntetes = new Headers({  "Content-Type": "text/plain",  "Content-Length": contenu.length.toString(),  "X-Custom-Header": "ATraiterImmediatement",});

console.log(mesEntetes.has("Content-Type")); // trueconsole.log(mesEntetes.has("Set-Cookie")); // falsemesEntetes.set("Content-Type", "text/html");mesEntetes.append("X-Custom-Header", "UneAutreValeur");console.log(mesEntetes.get("Content-Length")); // 11console.log(mesEntetes.get("X-Custom-Header")); // ['ATraiterImmediatement', 'UneAutreValeur']mesEntetes.delete("X-Custom-Header");console.log(mesEntetes.get("X-Custom-Header")); // null

const maReponse = Response.error();try {  maReponse.headers.set("Origin", "http://mabanque.com");} catch (e) {  console.log("On ne se fait pas passer pour une banque !");}

async function fetchJSON(requete) {  try {    const reponse = await fetch(requete);    const typeContenu = reponse.headers.get("content-type");    if (!typeContenu || !typeContenu.includes("application/json")) {      throw new TypeError("Ah, nous n'avons pas eu de JSON !");    }    const donneesJSON = await reponse.json();    // on continue le traitement des données  } catch (erreur) {    console.error("Erreur :", erreur);  }}

Note :Il n'est pas possible d'ajouter ou de modifier l'en-têteContent-Length d'un objet d'en-têtes de réponse avec une garde. De même, on ne pourra pas insérer d'en-têteSet-Cookie pour une réponse : lesservice workers ne sont pas autorisés à écrire des cookies dans des réponses de synthèse.

const monCorps = new Blob();addEventListener("fetch", (event) => {  // Un ServiceWorker qui intercepte une requête de récupération  event.respondWith(    new Response(monCorps, {      headers: { "Content-Type": "text/plain" },    }),  );});

Note :La méthode statiqueerror() renvoie une réponse d'erreur. De même,redirect() renvoie une réponse résultant en une redirection vers l'URL indiquée. Ces méthodes sont uniquement pertinentes dans le cadre desservice workers.

Note :Ces méthodes permettent de travailler plus facilement avec du contenu non-textuel (par rapport à ce que permettaitXMLHttpRequest).

const form = new FormData(document.getElementById("login-form"));fetch("/login", {  method: "POST",  body: form,});

if (window.fetch) {  // On exécute la requête avec Fetch ici} else {  // On tente autre chose avec XMLHttpRequest ?}