Kurzusok
/
JavaScript
JavaScript
/
Feladatok
/
Gyümölcsszedő
Gyümölcsszedő

Gyümölcsszedő

Tanulófeladat

Bevezetés

Callback függvények

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;
});

Utasítások

Ú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.

1. Értesítsd a vásárlódat, ha sikeres volt a rendelése

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' }`

2. Értesítsd a vásárlódat, ha nem sikerült a rendelése

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' }`

3. Készíts egy API-burkolót a zöldséges API-jának rendelési függvénye köré

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

4. Egyszerűsítsd a leadott rendelések kezelését

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
Szerkesztés GitHubon A hivatkozás új ablakban vagy lapon nyílik meg
JavaScript Exercism

Készen állsz elkezdeni a(z) Gyümölcsszedő feladatot?

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.