Propriétés synchrones de l’objet Response
Après le fetch() la demande est réussie, vous obtenez un Response objet. Il correspond à la réponse HTTP du serveur.
const response = await fetch(url);
Comme mentionné précédemment, les données contenues dans Response est lu de manière asynchrone via le Stream interface, mais il contient également des attributs synchrones, qui correspondent aux informations d’en-tête de la réponse HTTP (Headers), qui peuvent être lues immédiatement.
Dans l’exemple ci-dessus, response.status et response.statusText sont les attributs synchrones de Response et peut être lu immédiatement.
Response.ok
Le Response.ok la propriété renvoie une valeur booléenne, indiquant si la requête a abouti, true correspond au code d’état de la requête HTTP 200 à 299, et false correspond à d’autres codes d’état.
Response.status
Le Response.status La propriété renvoie un nombre indiquant le code d’état de la réponse HTTP (par exemple, 200, indiquant une requête réussie).
Response.statusText
Le Response.statusText La propriété renvoie une chaîne représentant les informations d’état de la réponse HTTP (par exemple, une fois la requête réussie, le serveur renvoie « OK »).
Response.url
Le Response.url La propriété renvoie l’URL demandée. Si l’URL a une redirection, cet attribut renvoie l’URL finale.
Response.type
Le Response.type la propriété renvoie le type de demande. Les valeurs possibles sont les suivantes :
basic: Demande ordinaire de même origine.cors: Demande d’origine croisée.error: Erreurs réseau, principalement utilisées pour les techniciens de service.opaque: Si lamodeattribut dufetch()la demande est définie surno-corscette valeur de réponse sera renvoyée.opaqueredirect: Si laredirectattribut dufetch()la demande est définie surmanualcette valeur de réponse sera renvoyée.
Response.redirected
Le Response.redirected La propriété renvoie une valeur booléenne, indiquant si la requête a été redirigée.
Déterminer si la demande aboutit
Après fetch() envoie une demande, il y a un point important à noter : fetch() signalera une erreur uniquement en cas d’erreur réseau ou d’impossibilité de se connecter. Dans les autres cas, aucune erreur ne sera signalée, mais la demande est considérée comme réussie.
Cela signifie que même si le code d’état renvoyé par le serveur est 4xx ou 5xx, fetch() ne signalera pas d’erreur (c’est-à-dire que la promesse ne deviendra pas rejected). Ce n’est qu’en obtenant le véritable code d’état de la réponse HTTP via le Responese.status propriété, peut-on déterminer si la demande aboutit. Veuillez consulter l’exemple suivant :
Dans l’exemple ci-dessus, le Responese.status L’attribut doit être égal à 2xx (200~299) pour déterminer que la demande a abouti. Il n’est pas nécessaire de prendre en compte le saut d’URL (le code de statut est 3xx) car fetch() convertira automatiquement le code d’état sauté en 200. Une autre méthode consiste à déterminer si Responese.ok est true.
Response.headers propriété
Le Response l’objet a également un Responese.headers propriété, qui pointe vers un Headers objetqui correspond à tous les en-têtes de la réponse HTTP. Headers les objets peuvent être traversés en utilisant for...of boucles.
Le Headers L’objet fournit les méthodes suivantes pour manipuler les en-têtes.
Headers.get(): Selon le nom de clé spécifié, renvoie la valeur-clé.Headers.has(): renvoie une valeur booléenne indiquant si un en-tête est inclus.Headers.set(): Définissez le nom de clé spécifié comme nouvelle valeur-clé, si le nom de clé n’existe pas, il sera ajouté.Headers.append(): Ajouter des en-têtes.Headers.delete(): Supprimez l’en-tête.Headers.keys(): Renvoie un itérateur qui peut parcourir toutes les clés tour à tour.Headers.values(): Renvoie un itérateur qui peut parcourir toutes les valeurs clés tour à tour.Headers.entries(): Renvoie un itérateur qui peut parcourir toutes les paires clé-valeur tour à tour ([key, value]).Headers.forEach(): Parcourez les en-têtes, tour à tour. Chaque en-tête exécutera une fonction de paramètre.
Certaines des méthodes ci-dessus peuvent modifier les en-têtes car ils héritent du Headers interface. Pour les réponses HTTP, la modification des en-têtes n’a que peu d’importance : de nombreux en-têtes sont en lecture seule et les navigateurs n’autorisent pas la modification. Parmi ces méthodes, la plus couramment utilisée est response.headers.get()qui est utilisé pour lire la valeur d’un certain en-tête.
Le Headers.keys() et Headers.values() Les méthodes sont utilisées pour parcourir respectivement les clés d’en-tête et les valeurs de clé.
Le Headers.forEach() La méthode peut également parcourir toutes les valeurs et noms de clés.
Comment lire le contenu
Le Response L’objet propose différentes méthodes de lecture selon les différents types de données renvoyées par le serveur.
response.text(): Récupère la chaîne de texte.response.json(): récupère l’objet JSON.response.blob(): Obtenez le binaireBlobobjet.response.formData(): Obtenir leFormDataobjet.response.arrayBuffer(): Obtenez le binaireArrayBufferobjet.
Les cinq méthodes de lecture ci-dessus sont toutes asynchrones et renvoient toutes Promise objets. Vous devez attendre la fin de l’opération asynchrone pour obtenir les données complètes renvoyées par le serveur.
response.text()
response.text() peut être utilisé pour obtenir des données texte, telles que des fichiers HTML.
response.json()
response.json() est principalement utilisé pour récupérer les données JSON renvoyées par le serveur. L’exemple a été donné plus haut.
response.formData()
response.formData() est principalement utilisé dans Service Worker pour intercepter le formulaire soumis par l’utilisateur, modifier certaines données, puis le soumettre au serveur.
response.blob()
response.blob() est utilisé pour obtenir le fichier binaire.
L’exemple ci-dessus lit le flower.jpg fichier image et l’affiche sur la page Web.
response.arrayBuffer()
response.arrayBuffer() est principalement utilisé pour obtenir des fichiers multimédias en streaming.
L’exemple ci-dessus est un exemple où response.arrayBuffer() récupère le fichier audio song.ogg puis le joue en ligne.
Réponse.clone()
Le Stream l’objet ne peut être lu qu’une seule fois et il disparaît après la lecture. Cela signifie qu’une seule des cinq méthodes de lecture de la section précédente peut être utilisée, sinon une erreur sera signalée.
let text = await response.text();
let json = await response.json(); // Report an error
L’exemple ci-dessus utilise response.text() d’abord, puis lit le Stream. Après avoir appelé response.json() plus tard, il n’y a aucun contenu à lire, donc une erreur est signalée. Le Response l’objet fournit le response.clone() méthode, qui crée une copie du Response objet et implémente plusieurs lectures.
Dans l’exemple ci-dessus, response.clone() fait une copie du Response objet, puis lisez la même image deux fois. Le Response l’objet a également un Response.redirect() méthode, qui est utilisée pour rediriger le Response résultat à l’URL spécifiée. Cette méthode n’est généralement utilisée que dans Service Workerje ne le présenterai donc pas ici.
Response.body attribut
Le Response.body La propriété est l’interface sous-jacente exposée par le Response objet. Il renvoie un ReadableStream objet pour les opérations utilisateur. Il peut être utilisé pour lire du contenu en blocs. Une application consiste à afficher la progression du téléchargement.
Dans l’exemple ci-dessus, le response.body.getReader() La méthode renvoie un itérateur. Le read() La méthode de ce traverseur renvoie à chaque fois un objet, représentant le bloc de contenu lu cette fois. Le done L’attribut de cet objet est une valeur booléenne, utilisée pour juger s’il a été lu. Le value l’attribut est un arrayBuffer tableau, qui représente le contenu du bloc de contenu. Le value.length L’attribut est la taille du bloc actuel.
