Promises Demo

Code asynchrone

L'interaction entre le client et le serveur se déroule généralement via le protocole HTTP (Hypertext Transfer Protocol). Le client envoie une requête HTTP au serveur, contenant des informations sur ce qu'il souhaite obtenir ou faire. Par exemple, il peut s'agir d'une demande de chargement d'une page Web ou d'envoi de données de formulaire. Le serveur, à son tour, traite cette requête et renvoie une réponse HTTP contenant les informations demandées ou le résultat de la requête. Cet échange de messages permet au client et au serveur d'interagir et d'échanger des données via le réseau, assurant le fonctionnement de diverses applications Web et services.

Pour effectuer des communications, du code asynchrone est utilisé. Le code asynchrone en JavaScript est un code qui s'exécute indépendamment du flux principal d'exécution du programme. Contrairement au code synchrone, qui s'exécute séquentiellement, le code asynchrone permet de continuer l'exécution du programme sans attendre la fin de certaines opérations, telles que le chargement de données depuis le réseau ou l'exécution de tâches longues.

Client (Frontend) et Server (Backend)

Dans le contexte du développement web, le client est le navigateur. Le client envoie des requêtes au serveur. Les requêtes peuvent être diverses. Le client peut demander au serveur de renvoyer des données spécifiques ou de les préparer d'une certaine manière avant de les renvoyer. Il peut également demander au serveur de sauvegarder quelque chose qu'il transmettra avec la requête elle-même.

Le serveur reçoit les requêtes du client. Son rôle est de stocker les informations du client dans la base de données, de les traiter et de fournir un accès selon certaines règles.

Les principales méthodes de requêtes incluent GET (demande des données au serveur), POST (envoie de nouvelles données au serveur), PUT (met à jour des données existantes sur le serveur), DELETE (supprime des données sur le serveur), PATCH (met à jour partiellement des données sur le serveur), OPTIONS (demande des informations sur les méthodes prises en charge par le serveur), HEAD (hemande les en-têtes de réponse sans le corps, similaire à GET).

Promise

Dès que le client envoie une requête au serveur, il crée automatiquement un objet Promise. Un Promise est un objet qui peut se trouver dans l'un des trois états suivants : en attente (Pending), accompli (Resolved) et rejeté (Rejected).

    const myPromise = new Promise((resolve, reject) => {
        const success = true;

            if (success) {
                resolve('Success!'); 
                // Le Promise entre en état Resolved
            } else {
                reject('Error.'); 
                // Le Promise entre en état Rejected
            }
        });

Response

La réponse du serveur comprend les informations renvoyées par le serveur en réponse à une requête envoyée par le client. Ce réponse contient généralement des données nécessaires à l'exécution de la demande du client, ainsi que des informations sur la demande elle-même, telles que le statut de la demande, les en-têtes et autres métadonnées.

Voici quelques-uns des principaux composants de la réponse du serveur :

Status Code : Il s'agit d'un code numérique qui informe le client de l'état de la demande. Par exemple, le code 200 indique une demande réussie, tandis que le code 404 indique que la ressource demandée n'a pas été trouvée.
Headers : Ce sont des métadonnées transmises avec la réponse et contiennent généralement des informations sur le type de contenu, l'encodage, la date et d'autres paramètres de la réponse.
Response Body : Ce sont les données renvoyées par le serveur en réponse à la demande. Ces données peuvent être dans différents formats tels que du texte, JSON, XML, etc., et contiennent généralement les informations demandées par le client.

Parsing

Lorsque le client reçoit une réponse du serveur, plusieurs étapes se produisent :

Réception des données : Le client reçoit les données du serveur, qui peuvent inclure du code HTML, du JSON, du XML, des images, des fichiers et d'autres ressources, en fonction de la requête qui a été envoyée.
Traitement de la réponse : Le client traite les données reçues en fonction de leur type et de leur contenu. Par exemple, si c'est du JSON, les données peuvent être utilisées pour mettre à jour l'interface utilisateur ou effectuer des actions.
Gestion des erreurs : Le client vérifie le code d'état de la réponse pour déterminer si la requête a été réussie ou s'il y a eu des erreurs. Si le code d'état indique une erreur, le client peut effectuer les actions appropriées.
Mise à jour de l'interface utilisateur : En fonction du contenu de la réponse, le client peut mettre à jour son interface utilisateur, par exemple en affichant les données reçues sur la page Web, en mettant à jour le contenu des éléments, en masquant ou en affichant certains composants, etc.
Actions supplémentaires : Après le traitement de la réponse, le client peut effectuer des actions supplémentaires, telles que l'envoi de requêtes supplémentaires, la mise à jour de l'état de l'application, l'exécution d'animations ou la redirection de l'utilisateur vers une autre page.

Lorsque la réponse du serveur est reçue, Promise dans l'état Pending passe à l'état Resolved (si response.ok === true) ou Rejected (si response.ok === false) en fonction de la réussite ou de l'échec de la requête.

Si la requête est réussie, alors Promise passe à l'état Resolved et vous pouvez obtenir les données de la réponse à l'aide de la méthode .then(). En cas d'erreur, Promise passe à l'état Rejected et vous pouvez traiter l'erreur à l'aide de la méthode .catch().

fetch('url') // Envoi d'une requête
    .then(response => {
        if (response.ok) {
        // Conversion de la réponse au format JSON
        return response.json();
    } else { // Gestion des erreurs
        throw new Error('HTTP Error: ' + response.status);
        }
    })
    .then(data => { // Utilisation les données de réponse
    })
    .catch(error => {// Gestion des erreurs
       console.error('Erreur de lecture de la réponse:', error);
    });

Lorsque Promise est résolue avec succès, cela signifie que l'opération asynchrone à laquelle Promise était attachée s'est terminée avec succès. En cas d'exécution d'une requête HTTP, la résolution réussie de Promise se produit lorsque le serveur renvoie un code de statut HTTP dans la plage de 200 à 299. Par exemple :

200 OK : Ce code de réponse indique que la requête a été exécutée avec succès et que les données demandées sont renvoyées.
201 Created : Il indique que la requête a été exécutée avec succès et a abouti à la création d'une nouvelle ressource.
204 No Content : Ce code indique que la requête a été exécutée avec succès, mais que le serveur ne renvoie aucun contenu en réponse.

Lorsque Promise est résolue avec succès, le premier gestionnaire .then() est exécuté, et c'est généralement dans ce gestionnaire que les données reçues sont traitées ou que des actions ultérieures sont exécutées en fonction du résultat réussi de l'opération.

.then(response => {// Géstion une réponse réussie
    if (response.ok) { // Conversion de la réponse au format JSON
        return response.json();
    } else { // Gestion des erreurs
        throw new Error('HTTP Error: ' + response.status);}
})

Lorsque Promise est résolue de manière infructueuse, cela signifie qu'une opération asynchrone, à laquelle Promise était liée, s'est terminée par une erreur ou un rejet. Par exemple, dans le cas d'une requête HTTP, Promise est résolue de manière infructueuse lorsque le serveur renvoie un code d'état HTTP en dehors de la plage 200-299. Les codes d'état HTTP les plus courants qui entraînent une résolution infructueuse de Promise sont :

404 Not Found : Indique que la ressource demandée n'a pas été trouvée sur le serveur.
401 Unauthorized : Indique qu'une authentification est nécessaire pour accéder à la ressource demandée, mais que le client n'a pas fourni les informations d'identification requises ou qu'elles sont incorrectes.
500 Internal Server Error : Indique une erreur interne du serveur qui empêche l'exécution de la requête.

Le bloc catch() est exécuté. Ce bloc est utilisé pour gérer les erreurs. Il contient du code qui sera exécuté en cas d'échec de l'opération. Ce bloc contient généralement la logique de gestion des erreurs, y compris l'affichage de messages d'erreur ou d'autres actions en fonction des besoins de l'application.

  .catch(error => { // Gestion des erreurs
    console.error('Erreur de lecture de la réponse:', error);
  });