Promesses en JavaScript : le guide ultime pour les débutants

Introduction

JavaScript est un langage de programmation polyvalent principalement utilisé pour le développement Web. L'une des fonctionnalités les plus puissantes de JavaScript est sa capacité à gérer des opérations asynchrones. C’est là qu’interviennent les promesses, permettant aux développeurs de gérer plus efficacement le code asynchrone. Ce guide vous présentera les bases des promesses, en vous fournissant des connaissances approfondies et des exemples pratiques pour vous aider à les comprendre et à les utiliser efficacement.

Table des matières

Heading	Subtopics
What is a Promise in JavaScript?	Definition, State of a Promise, Basic Syntax
Creating a Promise	Example, Resolving, Rejecting
Chaining Promises	then(), catch(), finally()
Handling Errors	Common Pitfalls, Error Handling Techniques
Promise.all()	Usage, Examples, Handling Multiple Promises
Promise.race()	Usage, Examples, First Settled Promise
Promise.any()	Usage, Examples, First Fulfilled Promise
Promise.allSettled()	Usage, Examples, When All Promises Settle
Async/Await	Syntax, Combining with Promises, Examples
Real-World Examples	Fetch API, Async File Reading
Common Mistakes	Anti-Patterns, Best Practices
Advanced Promise Concepts	Custom Promises, Promise Combinators
FAQs	Answering Common Questions
Conclusion	Summary, Final Thoughts

Qu'est-ce qu'une promesse en JavaScript ?

Une promesse en JavaScript est un objet représentant l'achèvement ou l'échec éventuel d'une opération asynchrone. Il vous permet d'associer des gestionnaires à la valeur de réussite éventuelle ou à la raison de l'échec d'une action asynchrone. Cela permet aux méthodes asynchrones de renvoyer des valeurs comme les méthodes synchrones : au lieu de renvoyer immédiatement la valeur finale, la méthode asynchrone renvoie une promesse de fournir la valeur à un moment donné dans le futur.

L'état d'une promesse

Une promesse peut être dans l'un des trois états suivants :

1. En attente : L'état initial, ni réalisé ni rejeté.
2. Réalisé : L'opération s'est terminée avec succès.
3. Rejeté : L'opération a échoué.

Syntaxe de base d'une promesse

let promise = new Promise(function(resolve, reject) {
    // Asynchronous operation
    let success = true;

    if(success) {
        resolve("Operation successful!");
    } else {
        reject("Operation failed!");
    }
});

Créer une promesse

Créer une promesse implique d'instancier un nouvel objet Promise et de lui passer une fonction. Cette fonction prend deux paramètres : résoudre et rejeter.

Exemple

let myPromise = new Promise((resolve, reject) => {
    let condition = true;
    if(condition) {
        resolve("Promise resolved successfully!");
    } else {
        reject("Promise rejected.");
    }
});

myPromise.then((message) => {
    console.log(message);
}).catch((message) => {
    console.log(message);
});

Dans cet exemple, myPromise sera résolue avec succès et enregistrera « Promesse résolue avec succès ! » à la console.

Enchaîner les promesses

L'une des caractéristiques puissantes des promesses est la possibilité de les enchaîner. Cela vous permet d'effectuer une séquence d'opérations asynchrones de manière lisible et maintenable.

alors()

La méthode then() est utilisée pour gérer la réalisation d'une promesse.

myPromise.then((message) => {
    console.log(message);
    return "Next step";
}).then((nextMessage) => {
    console.log(nextMessage);
});

attraper()

La méthode catch() est utilisée pour gérer le rejet d'une promesse.

myPromise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.log(error);
});

enfin()

La méthode enfin() est utilisée pour exécuter du code, que la promesse ait été remplie ou rejetée.

myPromise.finally(() => {
    console.log("Promise is settled (either fulfilled or rejected).");
});

Gestion des erreurs

La gestion des erreurs dans les promesses est cruciale pour un code robuste.

Pièges courants

1. Ignorer les erreurs : gérez toujours les erreurs à l'aide de catch().
2. Oublier de revenir : assurez-vous de renvoyer les promesses dans les gestionnaires then().

Techniques de gestion des erreurs

myPromise.then((message) => {
    console.log(message);
    throw new Error("Something went wrong!");
}).catch((error) => {
    console.error(error.message);
});

Promesse.all()

Promise.all() prend un tableau de promesses et renvoie une seule promesse qui se résout lorsque toutes les promesses du tableau sont résolues, ou qui est rejetée si l'une des promesses est rejetée.

Usage

let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
    console.log(values); // [3, 42, "foo"]
});

Promesse.race()

Promise.race() renvoie une promesse qui se résout ou se rejette dès que l'une des promesses du tableau est résolue ou rejetée.

Usage

let promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "two"
});

Promesse.any()

Promise.any() renvoie une promesse qui se résout dès que l'une des promesses du tableau se réalise, ou la rejette si toutes les promesses sont rejetées.

Usage

let promise1 = Promise.reject("Error 1");
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "Success"));
let promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, "Another success"));

Promise.any([promise1, promise2, promise3]).then((value) => {
    console.log(value); // "Success"
}).catch((error) => {
    console.log(error);
});

Promesse.allSettled()

Promise.allSettled() renvoie une promesse qui se résout une fois que toutes les promesses données ont été résolues ou rejetées, avec un tableau d'objets qui décrivent chacun le résultat de chaque promesse.

Usage

let promise1 = Promise.resolve("Resolved");
let promise2 = Promise.reject("Rejected");

Promise.allSettled([promise1, promise2]).then((results) => {
    results.forEach((result) => console.log(result.status));
});

Asynchrone/Attente

Les mots-clés async et wait vous permettent de travailler avec les promesses de manière plus synchrone.

Syntaxe

async function myFunction() {
    let myPromise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Done!"), 1000);
    });

    let result = await myPromise; // Wait until the promise resolves
    console.log(result); // "Done!"
}

myFunction();

Combiner avec des promesses

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data: ", error);
    }
}

fetchData();

Exemples concrets

Récupérer l'API

L'API Fetch est un cas d'utilisation courant pour les promesses.

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Lecture de fichiers asynchrone

Utiliser des promesses pour lire des fichiers dans Node.js.

const fs = require('fs').promises;

async function readFile() {
    try {
        let content = await fs.readFile('example.txt', 'utf-8');
        console.log(content);
    } catch (error) {
        console.error('Error reading file:', error);
    }
}

readFile();

Erreurs courantes

Anti-modèles

1. Callback Hell : évitez les appels then() imbriqués.
2. Ignorer les erreurs : gérez toujours les rejets de promesses.

Meilleures pratiques

1. Toujours renvoyer les promesses : assurez-vous de renvoyer une promesse dans vos gestionnaires then() et catch().
2. Utiliser Async/Await : simplifiez la gestion des promesses avec async et wait.

Concepts de promesse avancés

Promesses personnalisées

Vous pouvez créer des promesses personnalisées pour gérer des opérations asynchrones spécifiques.

function customPromiseOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Custom operation complete!");
        }, 2000);
    });
}

customPromiseOperation().then((message) => {
    console.log(message);
});

Combinateurs de promesses

Combinez plusieurs promesses à l'aide de combinateurs comme Promise.all(), Promise.race(), etc., pour gérer des flux asynchrones complexes.

FAQ

Comment les promesses aident-elles avec la programmation asynchrone ?
Les promesses offrent un moyen plus propre et plus lisible de gérer les opérations asynchrones par rapport aux rappels traditionnels, réduisant ainsi le risque de « l'enfer des rappels ».

Quelle est la différence entre then() et `

attraper() ?
then() est utilisé pour gérer les promesses résolues, tandis que catch()` est utilisé pour gérer les promesses rejetées.

Pouvez-vous utiliser des promesses avec un code JavaScript plus ancien ?
Oui, les promesses peuvent être utilisées avec du code JavaScript plus ancien, mais pour une compatibilité totale, vous devrez peut-être utiliser un polyfill.

Quel est l'avantage d'utiliser Promise.all() ?
Promise.all() vous permet d'exécuter plusieurs promesses en parallèle et d'attendre qu'elles se terminent toutes, ce qui facilite la gestion de plusieurs opérations asynchrones.

Comment async/await améliore-t-il la gestion des promesses ?
La syntaxe async/await donne au code asynchrone une apparence et un comportement plus semblables à ceux d'un code synchrone, améliorant ainsi la lisibilité et la maintenabilité.

Que se passe-t-il si une promesse n'est ni résolue ni rejetée ?
Si une promesse n’est ni résolue ni rejetée, elle reste indéfiniment en attente. Il est important de s'assurer que toutes les promesses seront finalement résolues ou rejetées pour éviter des problèmes potentiels.

Conclusion

Les promesses sont un élément fondamental du JavaScript moderne, permettant aux développeurs de gérer les opérations asynchrones de manière plus efficace et plus lisible. En maîtrisant les promesses, vous pouvez écrire un code plus propre et plus maintenable qui gère efficacement les complexités de la programmation asynchrone. Que vous récupériez des données à partir d'une API, lisiez des fichiers ou effectuiez des tâches asynchrones personnalisées, comprendre les promesses est essentiel pour tout développeur JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!