Les requêtes fetch

Fetch : à quoi ça sert?

Fetch est une API, fonction asynchrone (qui s'exécute en arrière plan) native à Javascript, permettant d'effectuer des requêtes sur un serveur. Cela permet de relier la partie Front-end d'une application avec la partie Back-end de façon fluide et dynamique. Une fois après avoir effectué la requête, elle retourne ce qui est nommé une promesse, contenant des données sur lesquelles on va pouvoir interagir avec.

Comment s'en servir?

L'utilisation est très simple:

    
        fetch('url_que_l'on_souhaite_aller_dessus',{
            paramètres: optionnels,
        })
        <div>
    

le but est d'aller sur une url, récupérer des données/effectuer des actions sur la base de données, et ainsi utiliser ce que l'on récupère afin d'exécuter certaines instructions. Il y a plusieurs paramètres optionnels que l'on peut mettre, mais nécessaires pour utiliser de façon efficace fetch. Les plus importants sont :

• method: 'Requête que l'on souhaite', //(GET, POST, PUT, DELETE, HEAD)
• headers: 'Ajoute des informations supplémentaires à une requête (comme une connexion)',
• body: Les données que l'on veut transmettre sur une requête post ou put (FormData ou Objet),
• cache : 'mode du cache'
• mode : 'mode de la requête (cors, no-cors, same-origin)',
• redirect: 'Comment gérer une redirection (follow,error,manual)'
• credentials: 'Permet d'envoyer les cookies avec la requête',
• Et d'autres moins importants

L'ordre est très important, car inverser deux paramètres peut ne pas faire fonctionner la requête correctement.

Envoi de données : FormData

Pour envoyer des données, on peut réaliser un FormData : c'est un objet natif à Javascript qui est utilisé principalement pour le traitement des données d'un formulaire, d'où son nom.

    
        //Création d'un FormData: paramètre optionnel qui est la balise form d'un formulaire (récupère toutes les valeurs de celui-ci)
        const formdata = new FormData();
        //Ajouter une donnée au FormData : 
        formdata.set('nom de la clé',valeur);
        //retirer une donnée au FormData : 
        formdata.remove('nom de la clé');
    

Son utilisation la plus fréquente est pour les requêtes fetch, afin de récupérer les données d'un formulaire à l'envoi de celui-ci.