A callback függvények olyan függvények, amelyeket argumentumként adunk át. Ez a programozási minta függvényhívások sorozatát hozza létre, szinkron és aszinkron programozásban egyaránt. Egy callback függvény megírása nem különbözik egy függvény megírásától, a callback függvénynek azonban illeszkednie kell a hívó függvény által meghatározott szignatúrához.
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
A callbackeket írhatod függvénykifejezésként, névtelen függvénykifejezésként vagy nyílfüggvény-kifejezésként is:
applyToSquare(function squarePerimeter(side) {
return side * 4;
});
applyToSquare(function (side) {
return side * 4;
});
applyToSquare((side) => {
return side * 4;
});
Új online portált készítesz, ahol a vásárlóid friss gyümölcsöt rendelhetnek közvetlenül a zöldségestől. A zöldségesnek van egy API-ja, amellyel megnézheted, hogy raktáron van-e mindaz, amit a vásárlóid szeretnének. Létre kell hoznod egy kisebb függvénytárat, amellyel a zöldséges API-jával tudsz kommunikálni.
A portálnak értesítenie kell a vásárlódat, ha a rendelése sikeres volt.
Definiáld az onSuccess visszahívó függvényt, amely akkor hívódik meg, ha a rendelés azért lett sikeres, mert a zöldségesnek elegendő gyümölcs volt raktáron.
Ennek a függvénynek meg kell hívnia az importált notify függvényt, és át kell adnia neki a { message: 'SUCCESS' } objektumot, hogy a vásárlód megtudja, sikeres volt a rendelése.
onSuccess();
// => `notify` called with `{ message: 'SUCCESS' }`
A portálnak értesítenie kell a vásárlódat, ha a rendelése nem sikerült.
Definiáld az onError visszahívó függvényt, amely akkor hívódik meg, ha a rendelés azért nem sikerült, mert a zöldségesnél nincs raktáron a gyümölcs, vagy hiba történt.
Ennek a függvénynek meg kell hívnia az importált notify függvényt, és át kell adnia neki a { message: 'ERROR' } objektumot, hogy a vásárlód megtudja, nem sikerült a rendelése.
onError();
// => `notify` called with `{ message: 'ERROR' }`
A gyümölcsrendeléseket a zöldséges API-ján keresztül, a rendelkezésre álló order függvénnyel adják le.
Ez a függvény három argumentumot kap: egy lekérdezést, amely a kért gyümölcs variety és quantity értékét tartalmazza, egy visszahívó függvényt, amely sikeres rendelés esetén hívódik meg, és egy visszahívó függvényt, amely akkor hívódik meg, ha a rendelés hibába fut.
Szeretnéd megvédeni a kódbázisodat a lehetséges külső változásoktól, ezért úgy döntesz, hogy az order függvény hívását egy új, orderFromGrocer nevű függvénybe csomagolod.
Valósítsd meg az orderFromGrocer függvényt, amely megpróbál rendelést leadni a zöldséges API-jának order függvényének meghívásával, és ügyelj arra, hogy az orderFromGrocer-nek átadott argumentumokat továbbítsd az API-hívásnak.
A lekérdezés egy objektum formájában jelenik meg:
const query = {
variety: string,
quantity: number,
};
orderFromGrocer(
{ variety: 'pear', quantity: 12 },
exampleSuccessCallback,
exampleErrorCallback,
);
// => `order` was called with the query and the callbacks
A vásárlóid mostanra a portálodon keresztül tudnak gyümölcsöt rendelni, te viszont azt veszed észre, hogy az orderFromGrocer függvényt a kódbázisod sok különböző helyén hívod meg, és minden alkalommal át kell adnod argumentumként egy query-t és a két callback függvényt.
Mivel lehetőséget látsz a kódod refaktorálására, úgy gondolod, egyszerűbb lenne, ha egyszerűen csak a szükséges gyümölcs variety és quantity értékének átadásával adhatnál le rendelést.
Definiáld a postOrder segédfüggvényt, amely variety és quantity argumentumokat vesz át, és megpróbál rendelést leadni a zöldségesnél.
postOrder('peach', 100);
// => order placed for 100 peaches
Iratkozz fel az Exercism-re, hogy megtanuld és elsajátítsd a(z) JavaScript nyelvet 37 fogalom159 feladat segítségével, valódi emberi mentorálással, mindez ingyen.