Einführung
Callback-Funktionen
Callback-Funktionen sind Funktionen, die als Argumente übergeben werden.
Dieses Programmiermuster erzeugt eine Abfolge von Funktionsaufrufen, sowohl in der synchronen als auch in der asynchronen Programmierung.
Eine Callback-Funktion zu schreiben unterscheidet sich nicht vom Schreiben einer Funktion. Allerdings muss die Callback-Funktion zu der Signatur passen, die die aufrufende Funktion festlegt.
const squareLength = 5;
// Caller function takes a callback function
function applyToSquare(callback) {
return callback(squareLength);
}
// Callback must expect the possible argument from the calling function
function areaOfSquare(number) {
return number * number;
}
applyToSquare(areaOfSquare); // => 25
Du kannst Callbacks auch als Funktionsausdruck, als anonymen Funktionsausdruck oder als Arrow-Funktion schreiben:
applyToSquare(function squarePerimeter(side) {
return side * 4;
});
applyToSquare(function (side) {
return side * 4;
});
applyToSquare((side) => {
return side * 4;
});
Anleitung
Du erstellst ein neues Online-Portal, über das deine Kundinnen und Kunden ihr Obst frisch beim Gemüsehändler bestellen können.
Der Gemüsehändler hat eine API, mit der du prüfen kannst, ob er den Bestand vorrätig hat, den deine Kundinnen und Kunden wünschen.
Du musst eine kleine Bibliothek mit Funktionen erstellen, um mit der API des Gemüsehändlers zu interagieren.
1. Benachrichtige deine Kundinnen und Kunden, wenn ihre Bestellung erfolgreich war
Das Portal soll deine Kundinnen und Kunden benachrichtigen, wenn ihre Bestellung erfolgreich war.
Definiere die Callback-Funktion onSuccess, die aufgerufen wird, wenn die Bestellung erfolgreich war, weil der Gemüsehändler genug Obst auf Lager hatte.
Diese Funktion soll die importierte Funktion notify aufrufen und dabei { message: 'SUCCESS' } übergeben, um deine Kundinnen und Kunden darüber zu informieren, dass ihre Bestellung erfolgreich war.
onSuccess();
// => `notify` called with `{ message: 'SUCCESS' }`
2. Benachrichtige deine Kundinnen und Kunden, wenn ihre Bestellung nicht erfolgreich war
Das Portal soll deine Kundinnen und Kunden benachrichtigen, wenn ihre Bestellung nicht erfolgreich war.
Definiere die Callback-Funktion onError, die aufgerufen wird, wenn die Bestellung nicht erfolgreich war, weil der Gemüsehändler das Obst nicht auf Lager hat oder ein Fehler aufgetreten ist.
Diese Funktion soll die importierte Funktion notify aufrufen und dabei { message: 'ERROR' } übergeben, um deine Kundinnen und Kunden darüber zu informieren, dass ihre Bestellung nicht erfolgreich war.
onError();
// => `notify` called with `{ message: 'ERROR' }`
3. Erstelle einen Wrapper für die Bestellfunktion der API des Gemüsehändlers
Obstbestellungen werden über die API des Gemüsehändlers mit der bereitgestellten Funktion order aufgegeben.
Diese Funktion erhält drei Argumente: eine Query, die variety und quantity des gewünschten Obstes enthält, eine Callback-Funktion, die aufgerufen wird, wenn die Bestellung erfolgreich war, und eine Callback-Funktion, die aufgerufen wird, wenn bei der Bestellung ein Fehler auftritt.
Du möchtest deine Codebasis vor möglichen externen Änderungen abschirmen und beschließt, den Aufruf der Funktion order in eine neue Funktion namens orderFromGrocer zu verpacken.
Implementiere die Funktion orderFromGrocer, die versucht, eine Bestellung über einen Aufruf der Funktion order der API des Gemüsehändlers aufzugeben, und achte darauf, die an orderFromGrocer übergebenen Argumente an den API-Aufruf weiterzuleiten.
Die Query hat die Form eines Objekts:
const query = {
variety: string,
quantity: number,
};
orderFromGrocer(
{ variety: 'pear', quantity: 12 },
exampleSuccessCallback,
exampleErrorCallback,
);
// => `order` was called with the query and the callbacks
4. Vereinfache den Umgang mit aufgegebenen Bestellungen
Deine Kundinnen und Kunden können jetzt Obstbestellungen über dein Portal aufgeben. Allerdings fällt dir auf, dass du die Funktion orderFromGrocer an vielen verschiedenen Stellen in deiner Codebasis aufrufst und dabei jedes Mal eine query und die beiden callback-Funktionen als Argumente übergeben musst.
Da du eine Gelegenheit siehst, deinen Code zu refaktorieren, denkst du, es wäre einfacher, eine Bestellung aufzugeben, indem du nur die benötigte variety und quantity übergibst.
Definiere die Hilfsfunktion postOrder, die variety und quantity als Argumente entgegennimmt und versucht, eine Bestellung beim Gemüsehändler aufzugeben.
postOrder('peach', 100);
// => order placed for 100 peaches
Lernübung
