Začíname so sľubmi jazyka JavaScript

Asynchrónny kód je užitočná pri vykonávaní úloh, ktoré sú časovo náročné ale samozrejme to je nie bez konzerva. Async kód používa funkcie spätného volania spracovať svoje výsledky, ale funkcie spätného volania nemôže vrátiť hodnoty že typické funkcie JavaScriptu môžu.

Takto nielen odoberajú našu schopnosť riadiť vykonanie funkcie ale tiež spracovanie chýb trochu hádka. Toto je miesto, kde sľub objekt prichádza, keďže má za cieľ vyplniť niektoré výmoly v asynchrónnom kódovaní.

sľub je technicky a štandardný interný objekt v jazyku JavaScript, čo znamená, že príde vstavaný do jazyka JavaScript. Používa sa na reprezentáciu eventuálny výsledok asynchrónneho bloku kódov (alebo dôvod, prečo kód zlyhal) a má metódy na ovládanie vykonanie asynchrónneho kódu.

syntax

Môžeme vytvoriť príklad sľub objekt pomocou Nový Kľúčové slovo:

 nový sľub (funkcia (vyriešiť, odmietnuť) ); 

Funkcia prešiel ako parameter na Promise () konštruktor je známy ako vykonávateľ. Obsahuje asynchrónny kód a má dva parametre funkcie typ, odkazovaný ako vyriešiť a odmietnuť Funkcie (viac o nich krátko).

Štáty Spojeného kráľovstva sľub objekt

počiatočný stav a sľub objekt sa nazýva nevykonaného. V tomto stave je výsledok asynchrónneho výpočtu neexistuje.

Počiatočný stav sa nezmení splnené stav, keď je výpočet úspešný. výsledok výpočtu je k dispozícii v tomto stave.

V prípade asynchrónneho výpočtu zlyhá, sľub objekt sa presunie na odmietnuté štáte nevykonaného state. V tomto štádiu dôvod zlyhania výpočtu (t.j. chybové hlásenie).

Odísť z nevykonaného na splnené stáť, vyriešiť () sa nazýva. Odísť z nevykonaného na odmietnuté stáť, odmietnuť() sa nazýva.

potom a úlovok metódy

Keď štát zmeny z nevykonaného na splnené, obslužný program udalosti sľub objekt je potom metóda je vykonaná. A keď štát zmeny z nevykonaného na odmietnuté, obslužný program udalosti sľub objekt je úlovok metóda je vykonaná.

Príklad 1

“Non-Promisified” kód

Predpokladajme, že existuje a hello.txt súbor obsahujúci súbor “Ahoj” slovo. Tu je postup, ako môžeme napísať žiadosť AJAX načítať súbor a zobraziť jeho obsah, bez použitia sľub objekt:

 funkcia getTxt () let xhr = nová XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = funkcia () try switch (this.status) prípad 200: document.write (this.response); prestávka; prípad 404: hádzať "Súbor nebol nájdený"; default: throw 'Súbor sa nepodarilo načítať';  chytiť (err) console.log (err);  getTxt (); 

Ak bol obsah súboru úspešne prevzali, tj. kód stavu odpovede je 200, text odpovede je zapísané do dokumentu. Ak je súbor nebol nájdený (stav 404), “Súbor nenájdený” sa zobrazí chybové hlásenie. Inak: a všeobecné chybové hlásenie naznačuje sa chyba pri načítaní súboru.

“Promisified” kód

Teraz, poďme Zistili vyššie uvedený kód:

 funkcia getTxt () return new Promise (funkcia (vyriešiť, odmietnuť) let xhr = nový XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.onload = function () switch (this.status) prípad 200: vyriešiť (this.response); prípad 404: odmietnuť ('File Not Found'); načítať súbor ');;);  getTxt () a potom (funkcia (txt) document.write (txt);) catch (funkcia (err) console.log (err); 

getTxt () je teraz kódovaná na vrátiť novú inštanciu sľub objekt, a jej vykonávacia funkcia drží asynchrónny kód predtým.

Keď kód stavu odpovede je 200, sľub je splnené podľa povolania vyriešiť () (odpoveď je odovzdaná ako parameter vyriešiť ()). Ak je stavový kód 404 alebo iný, kód sľub je odmietnuté použitím odmietnuť() (s príslušným chybovým hlásením ako parameter odmietnuť()).

obsluha udalostí pre potom () a catch () metódy z sľub objekt sú pridané na konci.

Keď sľub je splnené, obslužný pracovník potom () metóda je spustená. Jeho argument je parameter prešiel z vyriešiť (). Vo vnútri obsluhy udalosti je text odpovede (prijatý ako argument) zapísané do dokumentu.

Keď sľub je odmietnuté, obslužný program udalosti catch () metóda je spustená, zaznamenávanie chyby.

hlavná výhoda vyššie uvedené Promisované verzie kódu je spracovanie chýb. Namiesto vyhadzovania nezvyčajných výnimiek okolo - ako v verzii, ktorá nie je sľubná - príslušné správy o poruchách sú vrátené a zaznamenávané.

Ale nie je to len to vrátenie z správy o poruchách ale aj výsledok asynchrónneho výpočtu čo môže byť naozaj výhodné pre nás. Ak to chcete vidieť, budeme musieť rozšíriť náš príklad.

Príklad 2

“Non-Promisified” kód

Namiesto toho, aby ste práve zobrazili text z hello.txt, chcem skombinujte ho s “svet” slovo a zobrazte ho na obrazovke po uplynutí 2 sekúnd. Tu je kód, ktorý používam:

 funkcia getTxt () let xhr = nová XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = funkcia () try switch (this.status) prípad 200: document.write (concatTxt (this.response)); prestávka; prípad 404: hádzať "Súbor nebol nájdený"; default: throw 'Súbor sa nepodarilo načítať';  chytiť (err) console.log (err);  funkcia concatTxt (res) setTimeout (funkcia () return (res + 'Svet'), 2000);  getTxt (); 

Na stavovom kóde 200 sa concatTxt () je volaná funkcia zlučovať text odpovede s “svet” slovo pred zápisom do dokumentu.

Ale tento kód nebude fungovať podľa želania. setTimeout () funkcia spätného volania nemôže vrátiť zreťazený reťazec. Čo bude vytlačené do dokumentu je nedefinovaný pretože to je čo concatTxt () výnos.

“Promisified” kód

Takže, aby kód fungoval, poďme Zistili vyššie uvedený kód, počítajúc do toho concatTxt ():

 funkcia getTxt () return new Promise (funkcia (vyriešiť, odmietnuť) let xhr = nový XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.onload = function () switch (this.status) prípad 200: vyriešiť (this.response); prípad 404: odmietnuť ('File Not Found'); načítať súbor ');;);  funkcia concatTxt (txt) return new Promise (funkcia (vyriešiť, odmietnuť) setTimeout (funkcia () resolve (txt + 'Svet');  ()), potom ((txt) => return concatTxt (txt);) a potom ((txt) => document.write (txt); log (err);); 

Rovnako ako getTxt (), concatTxt () funkcia tiež vráti nový sľub objekt namiesto zreťazeného textu. sľub vrátená concatTxt () je vyriešená vo funkcii spätného volania setTimeout ().

V blízkosti konca vyššie uvedeného kódu obsluha udalosti prvého potom () metóda beží, keď sľub z getTxt () je splnené, t.j. keď je súbor úspešne vyzdvihnuté. Vo vnútri toho psovoda, concatTxt () sa nazýva a sľub vrátená concatTxt () je vrátená.

Spracovateľ udalosti druhého potom () metóda beží, keď sľub vrátená concatTxt () je splnené, t uplynutie dvoch sekúnd a vyriešiť () sa nazýva so zlučiteľným reťazcom ako jeho parametrom.

konečne, catch () zachytáva všetky správy o výnimkách a chybách z oboch sľubov.

V tejto sľúbenej verzii “Dobrý deň svet” reťazec bude úspešne vytlačené k dokumentu.