DEV Community: Heritier Lionge

L'utilisation des Promesses en JavaScript pour une gestion asynchrone efficace

Heritier Lionge — Tue, 18 Jul 2023 07:33:19 +0000

La programmation JavaScript offre une grande flexibilité grâce à sa nature asynchrone, permettant aux développeurs de créer des applications web interactives et réactives. Cependant, cette asynchronicité peut également poser des défis, notamment lorsqu'il s'agit de gérer des opérations longues ou d'effectuer des appels réseau. C'est là que les Promesses (Promises) entrent en jeu.

Dans cet article, nous explorerons le concept des Promesses en JavaScript et comment elles peuvent être utilisées pour simplifier la gestion asynchrone des opérations. Nous examinerons également comment les Promesses peuvent être combinées pour résoudre des problèmes plus complexes et améliorer la lisibilité du code. Préparez-vous à découvrir une approche plus claire et efficace de la programmation asynchrone avec JavaScript !

Les bases des Promesses :

Les Promesses sont un objet intégré dans JavaScript, introduit dans ECMAScript 6 (ES6), qui représente la finalité ou l'échec éventuel d'une opération asynchrone. Une Promesse peut être dans l'un des trois états suivants :

En attente (pending) : L'opération asynchrone est en cours d'exécution et la Promesse est en attente de sa résolution.
Accomplie (fulfilled) : L'opération asynchrone s'est terminée avec succès et la Promesse est résolue avec une valeur.
Rejetée (rejected) : L'opération asynchrone a échoué et la Promesse est rejetée avec une raison d'échec.

Création et utilisation des Promesses :

La création d'une Promesse se fait à l'aide du constructeur Promise. Ce constructeur prend une fonction exécuteur en argument, qui à son tour reçoit deux paramètres : resolve et reject. Ces paramètres sont des fonctions qui permettent de résoudre ou de rejeter explicitement la Promesse.

Voici un exemple simple de création et d'utilisation d'une Promesse en JavaScript :

const promesse = new Promise((resolve, reject) => {
  // Simulation d'une opération asynchrone
  setTimeout(() => {
    const réussite = true;

    if (réussite) {
      resolve("Succès !");
    } else {
      reject("Échec !");
    }
  }, 2000);
});

promesse.then((valeur) => {
  console.log(valeur); // Affiche "Succès !" après 2 secondes
}).catch((raison) => {
  console.log(raison); // Affiche "Échec !" après 2 secondes
});

Dans cet exemple, nous utilisons setTimeout pour simuler une opération asynchrone qui se résout avec succès après 2 secondes. La méthode then est utilisée pour spécifier une fonction de rappel qui sera exécutée lorsque la Promesse est résolue. La méthode catch est utilisée pour spécifier une fonction de rappel en cas de rejet de la Promesse.

Chaînage des Promesses :

L'un des aspects puissants des Promesses est la possibilité de les chaîner pour créer une séquence d'opérations asynchrones. Cela permet de gérer des situations où une opération dépend du résultat d'une autre opération asynchrone.

Voici un exemple de chaînage de Promesses :

function operationAsynchrone() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(10);
    }, 1000);
  });
}

operationAsynchrone().then((valeur) => {
  return valeur * 2;
}).then((valeur) => {
  console.log(valeur); // Affiche 20 après 1 seconde
});

Dans cet exemple, la fonction operationAsynchrone retourne une Promesse qui se résout avec la valeur 10 après 1 seconde. En utilisant la méthode then de manière chaînée, nous multiplions cette valeur par 2 et affichons le résultat. Cela permet d'obtenir une séquence d'opérations asynchrones de manière claire et lisible.

Conclusion :

Les Promesses en JavaScript offrent un moyen efficace de gérer la programmation asynchrone. Elles simplifient la gestion des opérations longues et des appels réseau, tout en améliorant la lisibilité du code. En comprenant les bases des Promesses et en les utilisant correctement, vous pourrez créer des applications web réactives et performantes.

En explorant davantage les fonctionnalités avancées des Promesses, telles que l'utilisation de Promise.all ou Promise.race, vous pouvez gérer des scénarios plus complexes et résoudre des problèmes asynchrones de manière élégante.

N'hésitez pas à expérimenter avec les Promesses en JavaScript et à les intégrer dans vos projets pour améliorer l'efficacité de votre gestion asynchrone.

Les notions élémentaires de JavaScript pour le web

Heritier Lionge — Wed, 31 May 2023 08:52:01 +0000

JavaScript est l'un des langages de programmation les plus couramment utilisés dans le développement web. Il permet d'ajouter de l'interactivité et de la dynamique aux sites web, ce qui le rend essentiel pour créer des expériences utilisateur enrichissantes. Dans cet article, nous allons passer en revue les notions élémentaires de JavaScript pour le web.

Introduction à JavaScript

JavaScript est un langage de programmation de haut niveau qui peut être exécuté côté client (dans le navigateur web) ainsi que côté serveur (avec l'utilisation de Node.js). Il a été créé pour ajouter des fonctionnalités interactives aux pages web et permettre une manipulation dynamique du contenu.

Variables et types de données

JavaScript utilise le mot-clé var pour déclarer une variable. Les variables en JavaScript sont dynamiquement typées, ce qui signifie qu'elles peuvent contenir différents types de données tels que les nombres, les chaînes de caractères, les booléens, les tableaux et les objets.

Exemple :

var age = 25;
var nom = "Jean";
var estMajeur = true;
var liste = [1, 2, 3, 4];
var personne = { nom: "Jean", age: 25 };

1.Opérateurs

JavaScript prend en charge différents opérateurs pour effectuer des calculs et des manipulations sur les données. Les opérateurs arithmétiques (+, -, *, /) sont utilisés pour les calculs mathématiques, les opérateurs de comparaison (==, ===, !=, !==, <, >, <=, >=) permettent de comparer les valeurs, et les opérateurs logiques (&&, ||, !) sont utilisés pour combiner des expressions booléennes.

2.Structures de contrôle

JavaScript utilise des structures de contrôle telles que les boucles (for, while) et les instructions conditionnelles (i_f, else, switch_) pour contrôler l'exécution du code en fonction des conditions.

Exemple :

for (var i = 0; i < 5; i++) {
  console.log(i);
}

if (age >= 18) {
  console.log("Vous êtes majeur.");
} else {
  console.log("Vous êtes mineur.");
}

Fonctions

Les fonctions en JavaScript permettent d'organiser le code en blocs réutilisables. Elles peuvent prendre des paramètres en entrée, effectuer des opérations et renvoyer une valeur.

Exemple :

function calculerSomme(a, b) {
  return a + b;
}

var resultat = calculerSomme(2, 3);
console.log(resultat); // Affiche 5

Manipulation du DOM

Le DOM (Document Object Model) représente la structure HTML d'une page web et permet de manipuler les éléments de la page à l'aide de JavaScript. On peut accéder aux éléments du DOM, modifier leur contenu, ajouter ou supprimer des éléments, et réagir à des événements tels que les clics de souris ou les soumissions de formulaire.

_Exemple _:

var titre = document.getElementById("titre");
titre.innerHTML = "Nouveau titre";

var bouton = document.getElementById("bouton");
bouton.addEventListener("click", function() {
  console.log("Le bouton a été cliqué.");
});

Ces notions élémentaires de JavaScript sont indispensables pour commencer à développer des fonctionnalités interactives sur le web. Avec une solide compréhension de ces concepts, vous pouvez explorer des sujets plus avancés tels que la manipulation des tableaux, la gestion des erreurs, les requêtes AJAX, etc.

En conclusion, JavaScript est un langage puissant et polyvalent qui joue un rôle essentiel dans le développement web moderne. En maîtrisant les notions élémentaires que nous avons abordées dans cet article, vous êtes prêt à vous lancer dans la création de sites web dynamiques et interactifs. Bonne programmation !

La fonction next() dans Express.js

Heritier Lionge — Wed, 02 Nov 2022 07:07:10 +0000

Express.js est un framework web populaire basé sur Node.js qui facilite la création d'applications web robustes et flexibles. L'une des fonctionnalités clés d'Express.js est la fonction Next(), qui joue un rôle crucial dans le flux de contrôle des requêtes HTTP. Comprendre le fonctionnement de Next() est essentiel pour exploiter pleinement le potentiel d'Express.js et créer des applications web efficaces. Dans cet article, nous explorerons la fonction Next() et comment l'utiliser pour gérer les middleware et améliorer la gestion des routes dans vos applications Express.js.

Pour savoir plus sur le middleware; consulter ici

Il existe de nombreuses fonctions middleware dans Express.js comme la fonction Express.js app.use() , et bien d'autres. Le middleware app.use() est essentiellement utilisé pour définir le gestionnaire de la demande particulière faite par le client.

Syntaxe:

app.use(path,(req,res,next))

Il accepte les deux paramètres mentionnés ci-dessus.

path : il s'agit du chemin pour lequel la fonction middleware est appelée. Il peut s'agir d'une chaîne représentant un chemin ou un modèle de chemin ou un modèle d'expression régulière pour faire correspondre les chemins.
callback : il s'agit de la fonction de rappel qui contient l'objet de requête, l'objet de réponse et la fonction next() pour appeler la fonction middleware suivante si la réponse du middleware actuel n'est pas terminée. Dans le deuxième paramètre, nous pouvons également passer le nom de la fonction du middleware.

Installation du module

Avant toute chose; on commence par installer le module express à l'aide de la commande suivante:

npm installer express

Serveur sans fonction next() vs Serveur avec fonction next()

Expliquons les deux cas avec des exemples:

Exemple 1 : Serveur sans fonction next()

// Importation du module express recemment installé
const express = require("express");
const app = express()

// création du premier Middleware
app.use("/", (req, res, next) => {
    console.log("Hello");
    // sans la fonction next()
})

// création du second middleware
app.get("/", (req, res, next) => {
    console.log("Bonjour requête")
})

// Execution du server
app.listen(3000, () => {
    console.log("Server is Running")
})

En Sortie : sans la fonction next(), nous remarquons que le middleware n'appelle pas le middleware suivant, même s'il demande un chemin identique.

Exemple 2 : Serveur avec la fonction next()

// Importation du module express récemment installé
const express = require("express");
const app = express()

// Création du premier Middleware
app.use("/", (req, res, next) => {
    console.log("Hello");
    // The next() function called
    next();
})

// création du second middleware
app.get("/", (req, res, next) => {
    console.log("Get Request")
})

// Execution the server
app.listen(3000, () => {
    console.log("Server is Running")
})