Az aszinkron programozás elterjedt módszere a promise-ok használata. Promise-ket általában az aszinkron műveletek és hálózati kérések kezelésére használják. A promise-ek segítségével a kód olvashatóbb és könnyebben karbantartható.
A Promise három lehetséges állapottal rendelkezik: pending (folyamatban), fulfilled (teljesült), és rejected (elutasítva). Kezdetben a Promise pending állapotban van, majd vagy teljesül, vagy elutasításra kerül. Az állapotváltás csak egyszer történik meg.
A promise objektum .then() és .catch() metódusokat kínál, amelyekkel lefutó és hibás eredményeket kezelhetjük. A .then() hívódik meg, amikor a Promise teljesül, míg a .catch() akkor, amikor elutasításra kerül. Több promise-objektumot is egymásba lehet ágyazni, ami hasznos a különböző aszinkron műveletek összetett sorrendjének kezelésére.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const peldaPromise = new Promise((resolve, reject) => { // Aszinkron műveletek vagy logika // Ha a művelet sikeres, hívjuk meg a resolve függvényt // Ha hiba történik, hívjuk meg a reject függvényt }); peldaPromise .then((result) => { // A művelet sikeres volt (resolve meghívódott) // A "result" tartalmazza a Promise által visszaadott értéket }) .catch((error) => { // Hiba történt (reject meghívódott) // Az "error" tartalmazza a hibát vagy hibaüzenetet }); |
Ebben a példában a wait függvény egy aszinkron műveletet modellez, egy időzítő segítségével. A wait függvény visszaad egy promise-t, amely egy adott időtartamig várakozik, majd visszaad egy üzenetet, amely a várakozás időtartamát jelzi.
A .then() blokkokban láncolva vannak a promise-ek, és minden .then() meghívja a wait függvényt. A promise-ek egymás után hajtódnak végre, így létrejön egy időzített sorozat, és az eredményeket sorban jelenítik meg a kijelzőn.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Promise gyakorlás</title> </head> <body> <h1>Promise gyakorlás</h1> <div id="demo"></div> <script> let divem = document.getElementById('demo'); function wait(ms, uzenet) { return new Promise((resolve) => { setTimeout(() => { resolve(uzenet); }, ms); }); } divem.innerHTML += "Művelet kezdete" + "<br>"; wait(2000, "Várakozás 2000 mill másodpercig." + "<br>") .then((uzenet) => { divem.innerHTML += uzenet; return wait(1500, "Várakozás 1500 mill másodpercig." + "<br>"); }) .then((uzenet) => { divem.innerHTML += uzenet; return wait(1000, "Várakozás 1000 mill másodpercig." + "<br>"); }) .then((uzenet) => { divem.innerHTML += uzenet; divem.innerHTML += "Művelet vége!"; }); </script> </body> </html> |
Négyzet területe, kerülete:
Ebben a példában a szamol függvény egy promise-t hoz létre, amely kiszámítja a négyzet területét és kerületét. Ha az oldalhossz negatív vagy nulla, akkor a promise reject-et hív meg egy hibaüzenettel. A then blokkokban kezeljük az eredményeket vagy a hibákat a promise által visszaadott értékek alapján.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function szamol(a) { return new Promise((resolve, reject) => { if (a <= 0) { reject("Az 'a' nem lehet negatív vagy nulla."); } else { const terulet = a * a; const kerulet = 4 * a; const eredmeny = { terulet: terulet, kerulet: kerulet }; resolve(eredmeny); } }); } const a = 5; szamol(a) .then((eredmeny) => { console.log("Négyzet területe: " + eredmeny.terulet); console.log("Négyzet kerülete: " + eredmeny.kerulet); }) .catch((hiba) => { console.error("Hiba: " + hiba); }); </script> </body> </html> |