Uvod u promisi u JavaScript-u

Već znate da upotreba kolbek (callback) modela asinhronosti lako dovodi do situacje callback hell. Zato je u JavaScript uveden novi model pod nazivom promisi (promise). Hajde da proučimo ovaj model.

Promis predstavlja objekat, u koji se kao parametar prosleđuje funkcija, unutar koje treba da smestimo naš asinhroni kod:

javascriptlet promise = new Promise(function() {
  // asinhroni kod
});

Kao što vidite, zapisao sam objekat sa promisom u promenljivu promise. Na nekom drugom mestu koda mogu primeniti na ovu promenljivu metodu then, prosledivši u nju funkciju sa kodom, koji treba da se izvrši po završetku asinhronog koda, napisanog pri kreiranju ovog promisa:

javascriptpromise.then(function() {
  // izvršiće se po završetku asinhronog koda
});

Zvuči zbunjujuće, pa hajde da pogledamo na primeru. Neka ja imam ovakav asinhroni kod:

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

Neka želim da rešim za njega naš osnovni zadatak asinhronosti: izvršiti neki kod nakon okidanja tajmera. Pritom ne želim da smestim taj kod u sam tajmer i želim da u taj kod nekako dospi rezultat, koji sam napisao u promenljivoj result. U suštini, rešavali smo ovaj zadatak u prethodnim lekcijama preko kolbeka i pretplata. Hajde sada da vidimo kako to uraditi preko promisa.

Za početak treba da obmotamo naš asinhroni kod u promis:

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

Ovo, međutim, nije dovoljno. Moramo eksplicitno da naznačimo, da se naš asinhroni kod završio. U tome će nam pomoći specijalna funkcija završetka, koja automatski dospijeva u prvi parametar funkcije, ako je naveden:

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

Pomoću funkcije završetka možemo eksplicitno da naznačimo promisu, da se asinhroni kod završio. Za to moramo pozvati ovu funkciju na nama potrebnom mestu:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(); // završavamo promis
  }, 3000);
});

Pritom, ako želimo da prosledimo napolje neki rezultat asinhronog koda, možemo ga proslediti kao parametar naše funkcije završetka:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(result); // prosleđujemo rezultat
  }, 3000);
});

Može se, naravno, osloboditi i od međupromenljive:

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

Sada na bilo kom drugom mestu možemo pozvati metodu then našeg promisa:

javascriptpromise.then(function() {
  // okidaće se po završetku promisa
});

Rezultat rada promisa će dospeti u prvi parametar funkcije, ako poželimo da ga navedemo:

javascriptpromise.then(function(result) {
  console.log(result); // ispisaće niz sa rezultatom
});