Bevezetés a JavaScript promise-ok használatába

Már tudjátok, hogy a callback-alapú aszinkronitási modell könnyen elvezet a callback hell helyzethez. Ezért a JavaScriptben bevezettek egy új modellt, melyet promise-nak (promise) hívnak. Tanulmányozzuk ezt a modellt.

A promise egy olyan objektum, melynek paraméterként átadunk egy függvényt, amelyben el kell helyeznünk az aszinkron kódunkat:

javascriptlet promise = new Promise(function() {
  // aszinkron kód
});

Amint látjátok, a promise objektumot eltároltam a promise változóban. A kód egy másik részében meghívhatom ennél a változónál a then metódust, átadva neki egy olyan függvényt, amelyben az a kód szerepel, amelyet a promise létrehozásakor megadott aszinkron kód befejezésekor kell végrehajtani:

javascriptpromise.then(function() {
  // végrehajtódik az aszinkron kód befejezésekor
});

Ez bonyolultnak hangozhat, ezért nézzünk egy példát. Tegyük fel, hogy van egy ilyen aszinkron kódom:

javascriptsetTimeout(function() {
  let result = [1, 2, 3, 4, 5];
}, 3000);

Tegyük fel, hogy meg akarom oldani számára az aszinkronitás alapvető feladatát: valamilyen kód végrehajtása az időzítő lejárta után. Ehhez nem akarom ezt a kódot magába az időzítőbe helyezni, és azt szeretném, hogy valahogy ebbe a kódba bekerüljön a result változóban tárolt eredmény. Lényegében ezt a feladatot már megoldottuk az előző leckékben callback-ekkel és feliratkozásokkal. Most nézzük meg, hogyan tehetjük meg ezt promise-okkal.

Először is, becsomagoljuk az aszinkron kódunkat egy promise-ba:

javascriptlet promise = new Promise(function() {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

Ez azonban még nem elég. Explicit módon jeleznünk kell, hogy az aszinkron kódunk befejeződött. Ebben segít egy speciális befejező függvény, amely automatikusan az első paraméterként érkezik, ha meg van adva:

javascriptlet promise = new Promise(function(resolve) { // megadjuk a paramétert
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

A befejező függvény segítségével explicit módon jelezhetjük a promise-nak, hogy az aszinkron kód befejeződött. Ehhez annak a függvénynek a megfelelő helyen kell meghívnunk:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(); // befejezzük a promise-ot
  }, 3000);
});

Ha valamilyen eredményt szeretnénk kívül átadni az aszinkron kódból, akkor azt átadhatjuk paraméterként a befejező függvényünknek:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(result); // átadjuk az eredményt
  }, 3000);
});

Természetesen meg is szabadulnunk a köztes változótól:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    resolve([1, 2, 3, 4, 5]);
  }, 3000);
});

Most a kód bármely más részében meghívhatjuk a promise then metódusát:

javascriptpromise.then(function() {
  // a promise befejezésekor aktiválódik
});

A promise eredménye az első paraméterként érkezik a függvénybe, ha meg akarjuk adni:

javascriptpromise.then(function(result) {
  console.log(result); // kiírja a tömböt az eredménnyel
});