A JavaScript ígéreteinek megkezdése

Aszinkron kód hasznos a feladatok végrehajtásához időigényes de természetesen nincsenek hátrányai. Az aszinkron kódot használja visszahívási funkciók eredményeinek feldolgozása, azonban a visszahívási funkciók nem tud visszatérni az értékekre hogy a tipikus JavaScript funkciók képesek.

Így nemcsak elvesztik a képességünket, hogy irányítsuk a a funkció végrehajtása de azt is hibakezelés egy kis gond. Ez az, ahol a Ígéret tárgy jön, mivel célja, hogy kitöltse néhányat aszinkron kódolásban.

Ígéret technikailag a szabványos belső objektum JavaScript-ben, ami azt jelenti, hogy jön beépített JavaScript. Ezt használják a az aszinkron kódblokk végeredménye (vagy az ok, amiért a kód meghiúsult) és módszerei a vezérlésre az aszinkron kód végrehajtása.

Szintaxis

Létrehozhatunk egy példánya Ígéret tárgy használni a új kulcsszó:

 új ígéret (funkció (rendezés, elutasítás) ); 

A funkció paraméterként hoz Ígéret() a konstruktort a végrehajtó. Tartalmazza az aszinkron kódot és két paramétere van Funkció típus, a továbbiakban elhatározás és elutasít funkciók (röviden ezekről röviden).

Államok Ígéret tárgy

A kezdeti állapot az a Ígéret az objektum neve függőben levő. Ebben az állapotban az aszinkron számítás eredménye nem létezik.

A kezdeti függőben lévő állapot megváltozik teljesülnek állapítsa meg, mikor van a számítás sikeres. A a számítás eredménye elérhető ebben az állapotban.

Az aszinkron számítás esetén nem sikerül, a Ígéret az objektum a elutasított állapotát a kezdetétől függőben levő állapot. Ebben az állapotban a a számítási hiba miatt (azaz hibaüzenet) elérhetővé válik.

Ahhoz, hogy menjen függőben levő nak nek teljesülnek állapot, elhatározás() nak, nek hívják. Ahhoz, hogy menjen függőben levő nak nek elutasított állapot, elutasít() nak, nek hívják.

A azután és fogás mód

Amikor az állam megváltozik függőben levő nak nek teljesülnek, az esemény kezelője Ígéret objektum azután eljárás végrehajtásra kerül. És amikor az állam megváltozik függőben levő nak nek elutasított, az esemény kezelője Ígéret objektum fogás eljárás végrehajtásra kerül.

1. példa

“Nem Promisified” kód

Tegyük fel, hogy van egy hello.txt fájlt tartalmazó “Szia” szó. Íme, hogyan írhatunk egy AJAX-kérést letölteni ezt a fájlt és megjeleníteni a tartalmát, használata nélkül Ígéret tárgy:

 függvény getTxt () let xhr = új XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send () eljárást; xhr.onload = függvény () try switch (this.status) case 200: document.write (this.response); szünet; 404 eset: „Fájl nem található”; alapértelmezett: dobja a 'Fájl lekérése sikertelen';  fogás (err) console.log (err);  getTxt (); 

Ha a fájl tartalma megtörtént sikeresen beolvasott, azaz. a válasz állapotkódja 200, a válasz szöveg a dokumentumba. Ha a fájl nem található (404 állapot), egy “Fájl nem található” hibaüzenet jelenik meg. Ellenkező esetben a általános hibaüzenet a fájl beolvasásának sikertelenségét jelzi.

“Promisified” kód

Most, hadd Ígérjük meg a fenti kódot:

 funkció getTxt () vissza az új Promise (funkció (megoldani, elutasítani) let xhr = új XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = függvény () switch (this.status) 200. eset: megoldás (this.response); 404 eset: elutasítás („Fájl nem található”); alapértelmezett: elutasítja („Nem sikerült Fetch the file ');;);  getTxt (), majd (függvény (txt) document.write (txt);) .fogás (funkció (err) console.log (err);); 

A getTxt () A funkció most kódolva van visszaad egy új példányt Ígéret tárgy, és a végrehajtó funkciója rendelkezik az aszinkron kóddal.

Amikor az a válasz állapotkódja 200, a Ígéret jelentése teljesülnek által hívás elhatározás() (a válasz a (z) elhatározás()). Amikor az állapotkód 404 vagy más, a Ígéret jelentése elutasított használva elutasít() (a megfelelő hibaüzenetként a elutasít()).

A eseménykezelők a azután() és fogás() mód a Ígéret objektum hozzáadódik a végén.

Amikor az Ígéret jelentése teljesülnek, a azután() a módszer fut. Az érv az a paraméter áthaladt elhatározás(). Az eseménykezelőn belül a válasz szöveg (az érvként kapott) a dokumentumba.

Amikor az Ígéret jelentése elutasított, az esemény kezelője fogás() a módszer fut, a hiba naplózása.

A fő előnye A fenti kód ígéretes változata a hibakezelés. Ahelyett, hogy eldobott kivételeket dobnánk - mint a nem ígéretes változatban - a megfelelő hibaüzeneteket vissza, és naplózott.

De ez nem csak az visszatérő a hibaüzenetek hanem a az aszinkron számítás eredménye ami valóban előnyös lehet számunkra. Hogy ezt lássuk, bővítenünk kell példát.

2. példa

“Nem Promisified” kód

Ahelyett, hogy csak megjelenítené a szöveget hello.txt, akarok kombinálja a “Világ” szó és jelenítse meg a képernyőn 2 másodperc elteltével. Íme az általam használt kód:

 függvény getTxt () let xhr = új XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send () eljárást; xhr.onload = függvény () try switch (this.status) case 200: document.write (concatTxt (this.response)); szünet; 404 eset: „Fájl nem található”; alapértelmezett: dobja a 'Fájl lekérése sikertelen';  fogás (err) console.log (err);  function concatTxt (res) setTimeout (függvény () return (res + 'World'), 2000);  getTxt (); 

A 200-as állapotkódon a concatTxt () funkciót hívják összekapcsolja a válasz szövegét a “Világ” szó írja be a dokumentumba.

De ez a kód nem fog működni a kívánt módon. A setTimeout () visszahívási funkció nem tudja visszaadni a tömörített karakterláncot. Mi lesz a dokumentum kinyomtatása határozatlan mert ez az mit concatTxt () visszatér.

“Promisified” kód

Tehát, hogy a kódot működtessük Ígérjük meg a fenti kódot, beleértve concatTxt ():

 funkció getTxt () vissza az új Promise (funkció (megoldani, elutasítani) let xhr = új XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = függvény () switch (this.status) 200. eset: megoldás (this.response); 404 eset: elutasítás („Fájl nem található”); alapértelmezett: elutasítja („Nem sikerült Fetch the file ');;);  függvény concatTxt (txt) vissza az új ígéret (funkció (megoldani, elutasítani) setTimeout (függvény () Resolution (txt + 'World');, 2000););  getTxt (), majd ((txt) => return concatTxt (txt);), majd ((txt) => document.write (txt);) .fogás ((err) => konzol. log (err);); 

Mint getTxt (), a concatTxt () funkció is új értéket ad vissza Ígéret tárgy az összefűzött szöveg helyett. A Ígéret vissza concatTxt () jelentése a belső visszahívási funkciót megoldotta setTimeout ().

A fenti kód vége közelében az első eseménykezelője azután() módszer fut, amikor a Ígéret nak,-nek getTxt () jelentése teljesülnek, vagyis amikor a fájl van sikerült. A kezelő belsejében, concatTxt () nak, nek hívják és a Ígéret vissza concatTxt () visszatér.

A második esemény eseménykezelője azután() módszer fut, amikor a Ígéret vissza concatTxt () jelentése teljesülnek, azaz a két másodperces időzítés véget ért és elhatározás() nak, nek hívják a konkatenált karaktersorozat paraméterével.

Végül, fogás() elkapja az összes kivételt és hibaüzenetet mindkét ígéretből.

Ebben az ígéretes változatban a “Helló Világ” a karakterlánc lesz sikeresen kinyomtatott a dokumentumhoz.