2.1 Création de promises
Les Promises sont un objet représentant l'achèvement (ou l'échec) d'une opération asynchrone et son résultat. Ils ont été introduits dans ES6 (ECMAScript 2015) et sont devenus la méthode standard pour travailler avec du code asynchrone en JavaScript.
Concepts principaux
Une promise peut être dans l'un des trois états suivants :
- Pending (en attente) : état initial, ni rempli ni rejeté.
- Fulfilled (rempli) : l'opération s'est terminée avec succès.
- Rejected (rejeté) : l'opération s'est terminée avec une erreur.
Création d'une promise
Une promise est créée à l'aide du constructeur Promise, qui prend une fonction exécuteur (executor function). Cette fonction prend deux arguments : resolve et reject. Le code asynchrone est exécuté à l'intérieur de cette fonction, et en cas de succès, resolve est appelé, et en cas d'erreur — reject.
Syntaxe :
const promise = new Promise((resolve, reject) => {
// Opération asynchrone
if (/* succès */) {
resolve(value); // Succès
} else {
reject(error); // Erreur
}
});
Exemple de création de promise :
const myPromise = new Promise((resolve, reject) => {
const success = true; // Condition pour réussir
if (success) {
resolve('Operation was successful');
} else {
reject('Operation failed');
}
});
2.2 Utilisation des promises
Méthode then
La méthode then est utilisée pour gérer le succès d'une promise. Elle prend deux fonctions : la première pour traiter le succès et la deuxième pour gérer les erreurs. Cependant, pour gérer les erreurs, la méthode catch est habituellement utilisée.
Exemple d'utilisation de then :
myPromise.then(
(successMessage) => {
console.log(successMessage); // Affiche : Operation was successful
},
(errorMessage) => {
console.error(errorMessage); // Sera appelé en cas d'erreur
}
);
Méthode catch
La méthode catch est utilisée pour gérer les erreurs d'une promise. Elle prend une fonction qui sera appelée en cas de rejet de la promise.
Exemple d'utilisation de catch :
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage); // Sera appelé : Operation failed
});
Méthode finally
La méthode finally est utilisée pour exécuter du code indépendamment du résultat de la promise (réussite ou échec). Elle ne prend pas d'arguments et s'exécute dans tous les cas après l'accomplissement ou le rejet de la promise.
Exemple d'utilisation de finally :
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage);
})
.finally(() => {
console.log('Operation completed'); // Sera appelé dans tous les cas
});
2.3 Exemples d'utilisation des promises
Exemple 1 : Opération asynchrone avec une promise
Simulation d'une opération asynchrone avec un timer.
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve('Async operation was successful');
} else {
reject('Async operation failed');
}
}, 2000);
});
}
asyncOperation()
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Async operation completed');
});
Exemple 2 : Exécution séquentielle des promises
Simulation d'opérations asynchrones séquentielles.
function firstOperation() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('First operation completed');
resolve('First result');
}, 1000);
});
}
function secondOperation(result) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Second operation completed');
resolve(`Second result, received: ${result}`);
}, 1000);
});
}
firstOperation()
.then((result) => {
return secondOperation(result);
})
.then((finalResult) => {
console.log(finalResult);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Both operations completed');
});
Exemple 3 : Exécution parallèle des promises avec Promise.all
Simulation d'opérations asynchrones parallèles.
function operationOne() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation One completed');
resolve('Result One');
}, 1000);
});
}
function operationTwo() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation Two completed');
resolve('Result Two');
}, 1500);
});
}
Promise.all([operationOne(), operationTwo()])
.then((results) => {
console.log('All operations completed');
console.log(results); // Affiche : ['Result One', 'Result Two']
})
.catch((error) => {
console.error('One of the operations failed', error);
});
GO TO FULL VERSION