Comment utiliser Fetch dans JavaScript

Fetch est une fonction en JavaScript utilisée pour interagir avec une base de données et des API (Application Programming Interface). Ces interactions incluent la récupération, le téléchargement, la modification et la suppression de données.

Vous pouvez penser à Fetch comme au jeu littéral de jouer à chercher avec votre chien:

• Vous lancez le bâton et voyez où il atterrit (récupérez l'URL).
• Votre chien court après le bâton et l'a dans sa bouche pour éventuellement le ramener (une promesse de faire ce que vous voulez).
• Votre chien vous le ramène et vous le livre, comme vous le souhaitez (vous recevez les données et pouvez les utiliser comme vous le souhaitez).

Pour comprendre Fetch, vous devez comprendre les quatre types de requêtes que Fetch nous fournit:

1. Requêtes GET - utilisées pour récupérer ou «récupérer» des données.
2. Requêtes POST - utilisées pour télécharger ou ajouter des données.
3. Requêtes PATCH / PUT - utilisées pour éditer les données déjà présentes dans la base de données.
4. Demandes DELETE - utilisées pour supprimer un élément de données.

fetch("http://example-Url-of-an-API")

Si vous entrez le code ci-dessus dans votre console, vous recevrez une promesse. En fait, une requête Fetch réussie renverra toujours une promesse. Une excellente façon de penser à une promesse est une reconnaissance de dette. Cette IOU garantit que quelque chose vous sera retourné. Une promesse s'accompagne d'une réponse, mais comment transformer cette réponse en données utilisables pour les applications?

Voulez-vous lire cette histoire plus tard? Enregistrez-le dans le Journal.

Vous faites cela avec une .theninstruction, qui convertit les données en quelque chose de lisible et digestible avec JSON. JSON ou J ava S cript O bjet N ottaison est le format de la façon dont vous transmettre des données par le biais des applications Web.

Voici un exemple de notre exemple de requête Fetch avec sa première .theninstruction:

fetch("http://example-Url-of-an-API")
 .then(response => response.json())

Lorsque vous invoquez .json()une promesse, en retour, vous obtenez une autre promesse. Cette deuxième promesse est impérative car elle vous permet de voir et d'utiliser les données que vous renvoyez d'une manière qui vous convient.

Dans l'exemple ci-dessous, les données de l'API sont enregistrées dans la console via la deuxième promesse de la requête Fetch.

fetch("http://example-Url-of-an-API")
 .then(response => response.json()
 .then(data => {
        console.log(data)
    })

Aux fins de ce blog et de simplicité, j'ai créé une base de données de films simple dans mon db.jsonfichier en VSCode et l'ai exécutée sur localhost: 3000 à l'aide de la commande json-server --watchdb.json.

Voici à quoi ressemble ma base de données:

OBTENIR la demande

GET les requêtes sont utilisées pour récupérer ou «récupérer» des données à partir d'une API:

fetch("http://localhost:3000/movies")
 .then(response => response.json())

DEMANDE POST

POST les requêtes sont utilisées pour télécharger ou ajouter des données à une API:

const configObject = {
 method: ‘POST’,
 headers: 
 {
  “Content-Type”: “application/json”,
  “Accept”: “application/json”
 },
 body: JSON.stringify({
  title,
  release_date,
  image_url,
  rating
 })
}
fetch("http://localhost:3000/movies", configObject)
 .then((response) => {
  return response.json()
 }).then(function (object) {
  return object
})

1. Le premier est la demande que je fais à la base de données ou au backend. Dans ce cas, c'est une POSTdemande.
2. Viennent ensuite les en-têtes, qui contiennent des informations sur les données envoyées. Le type de contenu indique le format dans lequel les données seront envoyées. Accepter signifie simplement dans quel format vous accepterez les données.
3. La dernière paire clé-valeur représente les informations sur les attributs nécessaires pour créer un objet film sous une forme stringifiée.

Demande de PATCH

PATCH / PUT les demandes sont utilisées pour modifier les données qui sont déjà dans la base de données.

fetch(`http://localhost:3000/movies/${movieId}`, {
 method: ‘PATCH’,
 headers:
 {
  “Content-Type”: “application/json”,
 },
 body: JSON.stringify({
  image_url,
  rating
 })
})
 .then((response) => {
  return response.json()
 }).then(function (object) {
 return object
})

Puisque je mets à jour des informations, je vais utiliser une PATCHméthode. Pour les PATCHdemandes, le lien est dynamique, vous rendez un lien dynamique en utilisant des rétrogradations ( `` ). J'ai fait cela parce que je veux que la PATCHdemande soit applicable à n'importe quel film avec n'importe quel identifiant dans notre base de données et pour ce faire, je dois interpoler le fichier ${movieId}.

J'ai également changé la section corps de la demande. J'ai fait cela parce que dans mon application, je veux que certains attributs soient modifiables. Dans ce cas, c'est le image_urlet le rating. J'ai omis le titleet release_datepuisque ces attributs d'un film ne changent généralement pas.

Supprimer la demande

DELETE les requêtes sont utilisées pour supprimer une donnée:

fetch(`http://localhost:3000/movies/${movieId}`, {
 method: “DELETE”,
 }).then(response => response.json())
   .then(response => { return response })

Ne vous inquiétez pas si tout cela semble être beaucoup d'informations au début. Il faut du temps et de la pratique pour comprendre Fetch. N'oubliez pas que la documentation est disponible et accessible à tout moment sur Internet. J'ai trouvé les documents Web MDN sur l'utilisation de Fetch très utiles:

Cela étant dit, lorsque vous débutez, essayez de ne pas copier et coller à partir de la documentation. Au lieu de cela, écrivez tout par vous-même, tout en consultant la documentation. Cela vous aidera à mieux comprendre ce que vous écrivez et ancrera la syntaxe dans votre mémoire.

À votre tour… Allez chercher!