Le deuxième paramètre dans fetch()

Lorsque nous essayons d'utiliser fetch()la fonction en classe, nous avons tendance à l'utiliser pour obtenir des données de l'API sur le site Web.

https://reqres.in/est un site Web qui fournit des API aux développeurs pour tester leur code. Les développeurs peuvent tester différentes méthodes HTTP et obtenir une vraie réponse mais de fausses données (REQRES, 2023). Nous utiliserons ce site Web pour tester notre code plusieurs fois.

Par exemple, nous pouvons obtenir les fausses données pour connaître le nom de l'utilisateur à partir dehttps://reqres.in/avec fetch().

Si vous cliquez sur le bouton Test fetch() to Get data , fetch essaiera d'obtenir les données de 'https://reqres.in/api/users/2'avec la méthode GET. Vous pouvez voir que "Janet" est ajouté ci-dessous.

Cependant, fetch ne peut pas seulement être utilisé pour récupérer les données. Il a un deuxième paramètre qui peut vous permettre de personnaliser ce que vous voulez faire avec la fonction de récupération.

Il est facultatif , vous pouvez donc l'ignorer totalement, et il fonctionne toujours pour obtenir les données, comme nous le faisions auparavant.

Le deuxième paramètre doit être un objet . Et à l'intérieur de cet objet, vous pouvez inclure plusieurs sous-paramètres, notamment le corps, l'en-tête, la méthode… (MDN, 2023).

Il y a un exemple :

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Alors, comment l'utilisons-nous ?

Dans cet exemple, une fois que les utilisateurs ont cliqué sur le bouton Tester la publication, notre application publiera le nom et l'emploi de l'utilisateur sur le serveur. Et il y aura un horodatage ci-dessous pour indiquer aux utilisateurs l'heure de création.

.catch((erreur) =>{})

Comme nous le savons tous, la fonction fetch() renverra a Promise Object. Cependant, que se passe-t-il si le serveur ne répond pas et que la promesse n'est pas tenue ?

Il y aura une erreur !

Nous devons donc utiliser catch((error) => {})pour attraper l'erreur pour éviter de planter.

Voyons l'exemple de code.

Dans cet exemple, j'ai "accidentellement" obtenu le mauvais lien. Ainsi, la promesse ne sera pas tenue et il y aura une erreur. Ainsi, si les utilisateurs cliquent sur le bouton Tester la publication, la console affichera "Erreur !!!".

Plus d'utilisation de l'objet Response

Nous avons discuté de la situation lorsqu'il y a une erreur et que l'objet promesse n'est pas rempli. Mais si l'objet promise renvoyé par fetch()est rempli, il renverra un objet Response .

Il existe certaines propriétés d'instance (MDN, 2023) :

• Réponse.ok
• État.de.la.réponse
• Response.statusText
• Réponse.url
• …

J'ai utilisé Response.status, qui renvoie le code d'état HTTP, et Response.ok, qui renvoie une valeur booléenne , nous pouvons voir si la récupération est réussie.

Pour cet exemple, si les utilisateurs cliquent sur le bouton Tester la publication, il y aura le code d'état HTTP et une valeur booléenne pour voir si cela réussit.

Abandon d'une récupération

Les utilisateurs peuvent également abandonner une récupération en utilisant le AbortController Object.

Nous devons créer un AbortController Objectséparément.

let controller = new AbortController();

Donc, notre nouveau deuxième paramètre est :

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

J'ai défini un intervalle pour faire l'abandon(). Ainsi, lorsque je clique d'abord sur l'abandon, Test Post lance une erreur AbortError dans la console. Et le statut et le code HTTP ne seront pas affichés sous le bouton Tester la publication comme nous le faisions auparavant.

Référence

MDN. (2023). Fetch() — API Web : MDN. API Web | MDN. Extrait le 31 mars 2023 dehttps://developer.mozilla.org/en-US/docs/Web/API/fetch

REQRES. (2023). Une rest-API hébergée prête à répondre à vos requêtes Ajax. Exig. Extrait le 31 mars 2023 dehttps://reqres.in/

MDN. (2023). Réponse — API Web : MDN. API Web | MDN. Extrait le 31 mars 2023 dehttps://developer.mozilla.org/en-US/docs/Web/API/Response

MDN. (2023). Abortcontroller — API web : MDN. API Web | MDN. Extrait le 31 mars 2023 dehttps://developer.mozilla.org/en-US/docs/Web/API/AbortController