Az ígéretek egy évvel ezelőtti bevezetésük óta nagyon izgatott vagyok. Bár rengeteg poszt és vélemény kering, a Promises nem teszi a kódodat teljesítményesebbé… könnyebben olvashatóvá és érthetőbbé teszi (ami az én könyvemben gyakran sokkal többet számít!)
A poszt első részében elmagyarázom az ígéretek alapvető felépítését. Ha ezzel már tisztában vagy, akkor nyugodtan lapozz a poszt második felére.
Promises explained in plain english
Itt az ígéret alapvető felépítése Javascriptben:
Meglehetősen tipikus (és megfoghatatlan) kódrészlet ez. Megpróbálom lebontani, hogy mi történik.
Kezdésnek csak az 1-15. sorokra koncentráljunk:
- Ez a példányosítás. Ez a sor alapvetően egy ígéretet hoz létre. Egy ígéretnek a JS-ben szüksége van valamire, egy feladatra. Tehát az itt átadott függvény – function (resolve,reject) {…} ez a feladat
- A következő a feladat teste. Itt lehet dolgokat csinálni. Valahol ebben a kódblokkban kell eldöntened, hogy a dolgok jól mentek-e vagy sem. Például, ha ezt a helyet arra használtad, hogy lekérj egy képet, akkor vagy megkaptad (jól ment)… vagy nem (nem annyira jól).
- Ha jól mentek a dolgok, akkor meghívsz valami függvényt, ami ezt az ígéretet “megoldottnak” jelöli. Ha a dolgok nem a terv szerint mentek, akkor “elutasítod” ezt az ígéretet. (erről mindjárt részletesebben is beszélünk)
Foglalkozzunk most a kódrészlet hátralévő részével, a 17-27. sorokkal:
- Az 1-15. sorokban eddig csak definiáltad a Promise objektumodat
- A 17. & 22. sorban alapvetően egy kezelőt csatolsz hozzá
- promise.XXXX (ahol az XXX lehet “.then” vagy “.catch” stb.) alapvetően az ígéretben definiált függvényt futtatja (1-15. sor). A dolgok alakulása alapján (megoldott vagy elutasított) meghívják a “.then”, illetve “.catch” függvényeket. Tehát ha az ígéreted megoldódott (…a dolgok jól mentek), akkor a .then(…) belsejében lévő függvényt hajtják végre, ellenkező esetben a .catch(…) függvényt.
JEGYZET:
- “.then(function)” egy Promise-t ad vissza. Továbbá a “.then(…)” vagy a “.catch(…)” csak Promise objektumokon hívható.
Most, hogy az alapokat átvettük, nézzünk egy érdekesebb példát arra, hogy mit tehetünk Promise-okkal.
Chaining Promises to perform multiple requests
Problem: Nemrég találkoztam egy olyan helyzettel, amikor egy csomó URL-t kellett egymás után lekérnem. Azonban az egyes URL-ekre adott választ az URL alapján másképp kellett kezelni.
A bejegyzés kedvéért tegyük fel, hogy a lehívott URL-ek a következők:
- google.com
- apple.com
- amazon.com
Itt van az általam használt szkript egyszerűsített változata:
Bontjuk le ezt:
- 1-11. sor: Egy egyszerű wrapper létrehozása a jQuery által biztosított AJAX Get módszer körül. Ez egyszerűen átadja a választ a megadott callbacknek.
- 18-51. sor: Ezután létrehozok három függvényt (igen! Funkciókat!), amelyek egy JS ígéretet adnak vissza
- Minden ígéret belsőleg ezt teszi – az Ajax wrapperrel lekérdezi az url-t, és miután megkapta az adatokat/választ, csinál valamit az adatokkal, és végül hívja a “resolve()”
- Az 54. sorban: Ezeket az ígéreteket láncolom egymás után. Figyeljük meg, hogy ezek a függvények mindegyike egy ígéretet ad vissza (és nem egy Promise önmagában). Ezért használom a “first()”.then(…) helyett a “first.then(…)”
Az ígéretlánc további tisztázása érdekében itt van egy módja az ígéretláncnak.
Ezzel a módszerrel egymás után megkaphatjuk az egyes URL-eket, a kívánt módon kezelhetjük őket, majd a “resolved()” függvényt kilőve a lánc következő Promise-ját indíthatjuk el 🙂
Megjegyzés: ha a fenti kódrészletet a böngészőben próbálja futtatni, engedélyeznie kell a CORS-t. Itt van egy Chrome kiterjesztés, amely egy egyszerű kattintással segít ebben.
Hope you enjoyed this post.