Utiliser Fetch - Référence Web API | MDN

Home » Add Content Type In Ajax Call » Utiliser Fetch - Référence Web API | MDN

Maybe your like

Flux verrouillés et perturbés

Les conséquences du fait que les corps de requête et de réponse sont des flux sont les suivantes :

  • si un lecteur a été attaché à un flux avec ReadableStream.getReader(), alors le flux est verrouillé, et rien d'autre ne peut lire le flux.
  • si du contenu a été lu depuis le flux, alors le flux est perturbé, et rien d'autre ne peut lire depuis le flux.

Cela signifie qu'il n'est pas possible de lire le même corps de réponse (ou de requête) plus d'une fois :

jsasync function obtenirDonnees() { const url = "https://exemple.org/produits.json"; try { const reponse = await fetch(url); if (!reponse.ok) { throw new Error(`Statut de réponse : ${reponse.status}`); } const resultat1 = await reponse.json(); const resultat2 = await reponse.json(); // va lancer une exception } catch (erreur) { console.error(erreur.message); } }

Si vous devez lire le corps plus d'une fois, vous devez appeler Response.clone() avant de lire le corps :

jsasync function obtenirDonnees() { const url = "https://exemple.org/produits.json"; try { const reponse1 = await fetch(url); if (!reponse1.ok) { throw new Error(`Statut de réponse : ${reponse1.status}`); } const reponse2 = reponse1.clone(); const resultat1 = await reponse1.json(); const resultat2 = await reponse2.json(); } catch (erreur) { console.error(erreur.message); } }

C'est un schéma courant lors de la mise en œuvre d'un cache hors ligne avec les service workers. Le service worker souhaite retourner la réponse à l'application, mais aussi mettre la réponse en cache. Il clone donc la réponse, retourne l'originale et met le clone en cache :

jsasync function cacheEnPremier(requete) { const reponseEnCache = await caches.match(requete); if (reponseEnCache) { return reponseEnCache; } try { const reponseReseau = await fetch(requete); if (reponseReseau.ok) { const cache = await caches.open("MonCache_1"); cache.put(requete, reponseReseau.clone()); } return reponseReseau; } catch (erreur) { return Response.error(); } } self.addEventListener("fetch", (event) => { if (ressourcesPrecachees.includes(url.pathname)) { event.respondWith(cacheEnPremier(event.request)); } });

Tag » Add Content Type In Ajax Call