2.1 Erstellen von Promises
Promises sind Objekte, die den Abschluss (oder das Scheitern) einer asynchronen Operation und ihr Ergebnis darstellen. Sie wurden in ES6 (ECMAScript 2015) eingeführt und sind der Standardweg zur Arbeit mit asynchronem Code in JavaScript.
Grundkonzepte
Ein Promise kann sich in einem von drei Zuständen befinden:
- Pending (schwebend): Anfangszustand, weder erfüllt noch abgelehnt.
- Fulfilled (erfüllt): Operation erfolgreich abgeschlossen.
- Rejected (abgelehnt): Operation mit Fehler abgeschlossen.
Erstellen eines Promises
Ein Promise wird mit dem Promise-Konstruktor erstellt, der eine Executor-Funktion akzeptiert. Diese Funktion akzeptiert zwei Argumente: resolve und reject. Innerhalb dieser Funktion wird asynchroner Code ausgeführt und im Erfolgsfall wird resolve aufgerufen, im Fehlerfall reject.
Syntax:
const promise = new Promise((resolve, reject) => {
// Asynchrone Operation
if (/* erfolgreicher Abschluss */) {
resolve(value); // Erfolg
} else {
reject(error); // Fehler
}
});
Beispiel für die Erstellung eines Promises:
const myPromise = new Promise((resolve, reject) => {
const success = true; // Bedingung für erfolgreichen Abschluss
if (success) {
resolve('Operation war erfolgreich');
} else {
reject('Operation fehlgeschlagen');
}
});
2.2 Verwendung von Promises
Die then-Methode
Die then-Methode wird verwendet, um einen erfolgreichen Abschluss eines Promises zu verarbeiten. Sie akzeptiert zwei Funktionen: eine zur Verarbeitung des erfolgreichen Abschlusses und eine zur Verarbeitung von Fehlern. Normalerweise wird jedoch zur Fehlerverarbeitung die catch-Methode verwendet.
Beispiel für die Verwendung von then:
myPromise.then(
(successMessage) => {
console.log(successMessage); // Gibt aus: Operation war erfolgreich
},
(errorMessage) => {
console.error(errorMessage); // Wird im Fehlerfall aufgerufen
}
);
Die catch-Methode
Die catch-Methode wird zur Fehlerverarbeitung eines Promises verwendet. Sie akzeptiert eine Funktion, die im Fall einer Ablehnung des Promises aufgerufen wird.
Beispiel für die Verwendung von catch:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage); // Wird aufgerufen: Operation fehlgeschlagen
});
Die finally-Methode
Die finally-Methode wird verwendet, um Code auszuführen, unabhängig vom Ergebnis des Promises (erfolgreich oder fehlerhaft). Sie akzeptiert keine Argumente und wird in jedem Fall nach der Erfüllung oder Ablehnung des Promises ausgeführt.
Beispiel für die Verwendung von finally:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage);
})
.finally(() => {
console.log('Operation abgeschlossen'); // Wird in jedem Fall aufgerufen
});
2.3 Beispiele für die Verwendung von Promises
Beispiel 1: Asynchrone Operation mit Promise
Simulation einer asynchronen Operation mit Timer.
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve('Asynchrone Operation war erfolgreich');
} else {
reject('Asynchrone Operation fehlgeschlagen');
}
}, 2000);
});
}
asyncOperation()
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Asynchrone Operation abgeschlossen');
});
Beispiel 2: Sequentielle Ausführung von Promises
Simulation von sequentiellen asynchronen Operationen.
function firstOperation() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Erste Operation abgeschlossen');
resolve('Erstes Ergebnis');
}, 1000);
});
}
function secondOperation(result) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Zweite Operation abgeschlossen');
resolve(`Zweites Ergebnis, erhalten: ${result}`);
}, 1000);
});
}
firstOperation()
.then((result) => {
return secondOperation(result);
})
.then((finalResult) => {
console.log(finalResult);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Beide Operationen abgeschlossen');
});
Beispiel 3: Parallele Ausführung von Promises mit Promise.all
Simulation von parallelen asynchronen Operationen.
function operationOne() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation Eins abgeschlossen');
resolve('Ergebnis Eins');
}, 1000);
});
}
function operationTwo() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation Zwei abgeschlossen');
resolve('Ergebnis Zwei');
}, 1500);
});
}
Promise.all([operationOne(), operationTwo()])
.then((results) => {
console.log('Alle Operationen abgeschlossen');
console.log(results); // Gibt aus: ['Ergebnis Eins', 'Ergebnis Zwei']
})
.catch((error) => {
console.error('Eine der Operationen ist fehlgeschlagen', error);
});
GO TO FULL VERSION