Comment utiliser fetch en Javascript<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> min read</span>
fetch api javascript

Comment utiliser fetch en Javascript7 min read

L’api Fetch fonctionne avec les promesses Javascript. C’est une librairie permettant d’envoyer des requêtes HTTP de manière asynchrone, un peu comme les requêtes HMLHttpRequest.

Contrairement à cette dernière API, Fetch fonctionne de manière simple. Les fonctions sont extrêmement simple et tout les navigateurs web la supportent.

Tout ça, c’est ce qu’on appelle AJAX, pour Asynchronous Javascript and XML. Concrètement, ce sont des requêtes HTTP cachées à l’utilisateurs qui ont pour objectif de télécharger et d’envoyer des données à un serveur.

L’utilisation de l’API Fetch

L’api Javascript Fetch est vraiment simple à utiliser. Il vous suffit d’utiliser la fonction fetch() avec une url pour effectuer une requête GET

Comme je l’ai dit, la librairie fonctionne avec des promesses, on peux donc utiliser then catch et finally

fetch('monsite/api.com')
    .then(response => {
        // gestion des données
    })
    .catch(err => {
        // gestion des erreurs
    });

L’url que l’on passe va donc être recherchée via AJAX. Cette fonction renvoi une promesse que l’on peux récupérer avec le bloc then(). Dans ce bloc, on peux récupérer les données grâce à la variable response. Dans celle-ci, vous trouverez les données de la requête HTTP, le header, le body et les paramètres.

Si pour une raison X la fonction fetch retourne une erreur, on peux les récupérer avec le bloc catch(). Dans cette fonction on obtiens une variable error qui va nous permettre la traiter et d’obtenir des informations.

Les requêtes GET

Par défaut, l’API fetch envoi des requêtes GET. Pour faire quelques test, je vais utiliser json placeholder

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

On utilise ici la fonction response.json() pour récupérer les objets renvoyés par la requête GET.

On récupère donc un objet sous forme JSON. On peux ensuite le manipuler et le sauvegarder dans le localstorage.

Voici la réponse de la requête :


{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Si vous voulez récupérer une réponse XML, vous devriez utiliser la fonction text() afin de récupérer les données. Comme vous pouvez le voir, fetch permets de récupérer les objets json() de manière très simple.

Les requêtes POST

La librairie Fetch permets d’utiliser des verbes HTTP autre que GET. On peux utiliser tout ces verbes HTTP : POST, PUT, DELETE, HEAD and OPTIONS

Tout ce que vous avez à faire, c’est passer dans un objet options le verbe HTTP que vous voulez utiliser, voici un exemple :

Pour vous montrer les requêtes POST, je vais utiliser le site https://reqres.in qui permets de créer de fausses requêtes HTTP

const user = {
    first_name: 'John',
    last_name: 'Lilly',
    job_title: 'Software Engineer'
};

const options = {
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users', options)
    .then(res => res.json())
    .then(res => console.log(res));

Ici, on envoi dans les données du body l’utilisateur que l’on veux créer. Ensuite, notre route HTTP va créer l’utilisateur et nous le renvoyer dans un objet JSON. Comme vous pouvez le voir, on passe le type de requête grâce à la clé method

{  
   "first_name":"John",
   "last_name":"Lilly",
   "job_title":"Software Engineer",
   "id":"482",
   "createdAt":"2019-05-12T15:09:13.140Z"
}

La requête DELETE

La méthode DELETE permets de supprimer un élément. On passe la route, tout comme post on donne le nom DELETE. La seule différence c’est que l’on as pas besoin de donner de body :

const options = {
    method: 'DELETE',
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users/2', options)
    .then(res => {
        if (res.ok) {
            return Promise.resolve('L utilisateur as été supprimé');
        } else {
            return Promise.reject('Une erreur est survenue');
        }
    })
    .then(res => console.log(res));

Ici, on envoi une requête DELETE dans l’objectif de supprimer un utilisateur en passant son id dans l’url. Comme vous le voyez, c’est vraiment simple.

La gestion des erreurs avec Fetch

La librairie Fetch utilise les promesses, on peux donc gérer les erreurs grâce au mot clé catch()

Ici, on génère volontairement une erreur 404 dans notre requête, on la gère ensuite dans notre code :

fetch('https://reqres.in/api/users/22') // On génère une 404
    .then(res => {
        if (res.ok) {
            return res.json();
        } else {
            return Promise.reject(res.status);
        }
    })
    .then(res => console.log(res))
    .catch(err => console.log(`Erreur avec le message : ${err}`));

L’objet response

L’objet réponse retourné par la fonction fetch(). L’objet contiens énormément de propriétés extrêmement intéressantes. On peux obtenir les header, les code de status, les messages etc :

fetch('https://reqres.in/api/users')
    .then(res => {
        console.log(res.headers.get('content-type'));
        console.log(res.headers.get('expires'));

        console.log(res.status);
        console.log(res.ok); // shorthand for `status` between 200 and 299 
        console.log(res.statusText);
        console.log(res.redirected);
        console.log(res.type);
        console.log(res.url);
    });

Pour récupérer les données à l’intérieur du body, on peux utiliser les méthodes suivantes :

  • json() Renvoi un objet json
  • text() Renvoi le body sous forme de chaîne de caractère
  • blob() Renvoi le body en objet de blob
  • formData() Renvoi le body sous forme de FormData
  • arrayBuffer() Renvoi le body sous forme d’array Buffer

Gardez en tête que toutes les méthodes ci dessous retournent des promesses. Vous devez donc réutiliser then dessus pour pouvoir ensuite manipuler les données

fetch('https://reqres.in/api/user/2')
    .then(res => res.text())
    .then(res => console.log(res));

Cette requête va renvoyer l’objet JSON sous forme d’une chaîne de caractère :

'{"data":{"id":2,"name":"fuchsia rose","year":2001,"color":"#C74375","pantone_value":"17-2031"}}'

Utiliser Async Await avec Fetch

Fetch est une librairie basée sur des promesses. On peux donc aller un peu plus loin et utiliser les systèmes async await pour rendre notre code plus simple et plus optimisé :

const fetchUsers = async () => {
    try {
        const res = await fetch('https://reqres.in/api/users');
        if (!res.ok) {
            throw new Error(res.status);
        }
        const data = await res.json();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

fetchUsers();

En conclusion

L’api Fetch va vous permettre d’utiliser les requêtes AJAX beaucoup plus simplement. Plus besoin d’utiliser AXIOS.

C’est vraiment une bonne librairie qui va vous permettre de rendre votre code plus rapide et plus simple à écrire.

J’espère que cet article vous aura aidé. Si c’est le cas, n’hésitez pas à vous abonner à ma newsletter, vous recevrez en plus un livre gratuit pour bien débuter la programmation.

Vous abonner à notre newsletter

* champ requis

N’hésitez pas à me poser des questions en commentaires

Laisser un commentaire

Fermer le menu
×
×

Panier