Promiside sissejuhatus JavaScriptis

Te juba teate, et kõne tagasimudeli asünkroonsuse kasutamine viib kergesti olukorrani callback hell. Seetõttu võeti JavaScripti kasutusele uus mudel nimega promis (promise). Õppigem seda mudelit.

Promis kujutab endast objekti, kuhu parameetrina edastatakse funktsioon, mille sees tuleb paigutada meie asünkroonne kood:

javascriptlet promise = new Promise(function() {
  // asünkroonne kood
});

Nagu näete, kirjutasin promisega objekti muutujasse promise. Mõnes muus kohas koodis võin sellele muutujale rakendada meetodit then, edastades sinna funktsiooni koodiga, mis tuleb täita pärast selle promisi loomisel kirjutatud asünkroonse koodi lõppu:

javascriptpromise.then(function() {
  // täidetakse asünkroonse koodi lõppedes
});

Kõlab segaselt, nii et vaatame näidet. Oletame, et mul on selline asünkroonne kood:

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

Oletame, et ma tahan selle jaoks lahendada meie põhilise asünkroonsuse ülesande: täita mingi kood pärast taimeri käivitumist. Samas ma ei soovi seda koodi paigutada taimeri sisse ja soovin, et sellesse koodi mingil moel satuks tulemus, mille ma kirjutasin muutujasse result. Üldiselt oleme selle ülesande lahendanud eelmistes õppetundides läbi kõnetagastuste ja tellimuste. Vaatame nüüd, kuidas seda teha promiside kaudu.

Alustuseks tuleb meie asünkroonne kood mähkida promisisse:

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

Sellest aga ei piisa. Me peame otseselt määrama, et meie asünkroonne kood on lõppenud. Selles aitab meid spetsiaalne lõpetamisfunktsioon, mis automaatselt saabub esimeseks parameetriks funktsioonile, kui see on määratud:

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

Lõpetamisfunktsiooni abil saame otseselt määrata promisile, et asünkroonne kood on lõppenud. Selleks peame kutsuma selle funktsiooni välja meile vajalikus kohas:

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

Samuti, kui soovime edastada väljapoole mingit asünkroonse koodi tulemust, saame selle edastada parameetrina meie lõpetamisfunktsioonile:

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

Loomulikult võib lahti saada vahepealsest muutujast:

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

Nüüd saame igas muus kohas välja kutsuda meie promisi meetodi then:

javascriptpromise.then(function() {
  // käivitub promisi lõppedes
});

Promisi töö tulemus satub esimesse funktsiooni parameetrisse, kui soovime selle määrata:

javascriptpromise.then(function(result) {
  console.log(result); // väljastab massiivi tulemusega
});