JavaScript-lupausten aloittaminen

Asynkroninen koodi on hyödyllinen tehtävien suorittamiseen aikaavievä mutta tietenkin se on ei riitä. Async-koodi käyttää soittopyyntötoiminnot käsittelemään tuloksia, mutta takaisinsoitotoiminnot ei voi palauttaa arvoja että tyypilliset JavaScript-toiminnot voivat.

Niinpä ne eivät vain ota pois kykyämme hallita tehtävän suorittaminen mutta myös tehdä virheenkäsittely hieman vaivaa. Tässä on Lupaus esine tulee, koska sen tarkoituksena on täyttää joitakin asynkronisessa koodauksessa.

Lupaus on teknisesti a vakio sisäinen objekti JavaScriptissä, eli se tulee sisäänrakennettu JavaScript. Sitä käytetään edustamaan asynkronisen koodilohkon lopputulos (tai syy siihen, miksi koodi epäonnistui) ja sillä on menetelmät ohjata koodia asynkronisen koodin suorittaminen.

Syntaksi

Voimme luoda esimerkki Lupaus esine käyttämällä Uusi avainsana:

 uusi Promise (toiminto (ratkaise, hylkää)) ); 

Toiminto parametri että Lupaus() rakentaja tunnetaan nimellä täytäntöönpanija. Siinä on asynkroninen koodi ja on kaksi parametria Toimia tyyppi, nimitystä ratkaista ja hylätä toiminnot (lisää näistä lähiaikoina).

Valtiot Lupaus esine

alkutilaan a Lupaus objektia kutsutaan odotettaessa. Tässä tilassa asynkronisen laskennan tulos ei ole olemassa.

Ensimmäinen odottava tila muuttuu täyttyvät kun laskenta on onnistunut. laskennan tulos on käytettävissä tässä tilassa.

Jos asynkroninen laskenta epäonnistuu, Lupaus objekti siirtyy kohtaan hylätty tila alkuperäisestä odotettaessa osavaltio. Tässä tilassa laskennan epäonnistumisen vuoksi (eli virhesanoma) on saatavilla.

Siirry odotettaessa että täyttyvät osavaltio, ratkaista() kutsutaan. Siirry odotettaessa että hylätty osavaltio, hylätä() kutsutaan.

sitten ja saada kiinni menetelmät

Kun valtio muuttuu odotettaessa että täyttyvät, tapahtuman käsittelijä Lupaus objektin sitten menetelmä suoritetaan. Ja kun valtio muuttuu odotettaessa että hylätty, tapahtuman käsittelijä Lupaus objektin saada kiinni menetelmä suoritetaan.

Esimerkki 1

“Non-Promisified” koodi

Oletetaan, että on hello.txt tiedosto, joka sisältää “Hei” sana. Näin voimme kirjoittaa AJAX-pyynnön hae tiedosto ja näyttää sen sisällön, käyttämättä Lupaus esine:

 toiminto getTxt () let xhr = uusi XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = toiminto () try switch (this.status) case 200: document.write (this.response); tauko; tapaus 404: "Tiedosto ei löydy"; oletus: heittää 'Tiedoston nouto epäonnistui';  saalis (err) console.log (err);  getTxt (); 

Jos tiedoston sisältö on ollut haettu onnistuneesti, so. vasteen tilan koodi on 200, vastausteksti on kirjoitettu asiakirjaan. Jos tiedosto on ei löydy (tila 404), “Tiedostoa ei löytynyt” virheilmoitus heitetään. Muuten a yleinen virheilmoitus osoittaa, että tiedoston hakeminen epäonnistui.

“Promisified” koodi

Nyt, nyt Lupaa yllä oleva koodi:

 toiminto getTxt () palauta uusi Promise (toiminto (ratkaise, hylkää)) let xhr = uusi XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = toiminto () kytkin (this.status) tapaus 200: ratkaisu (tämä.response), tapaus 404: hylkää ('tiedosto ei löydy'), oletus: hylkää ('epäonnistui noutaa tiedosto ');;);  getTxt (). sitten (toiminto (txt) document.write (txt);). saalis (toiminto (err) console.log (err);); 

getTxt () toiminto on nyt koodattu palauttaa uuden instanssin Lupaus esine, ja sen suorittimen toiminto pitää asynkronista koodia aikaisemmin.

Kun vasteen tilan koodi on 200, Lupaus on täyttyvät mennessä kutsumus ratkaista() (vastaus siirretään parametrina ratkaista()). Kun tilakoodi on 404 tai jokin muu, Lupaus on hylätty käyttämällä hylätä() (asianmukaisella virheilmoituksella hylätä()).

tapahtuman käsittelijät sitten() ja saada kiinni() menetelmät n Lupaus kohde on lopussa.

Kun Lupaus on täyttyvät, -. \ t sitten() menetelmää käytetään. Sen väite on parametri lähti ratkaista(). Tapahtumakäsittelijän sisällä vastausteksti (vastaanotettu argumenttina) on kirjoitettu asiakirjaan.

Kun Lupaus on hylätty, tapahtuman käsittelijä saada kiinni() menetelmää käytetään, virheen kirjaaminen.

tärkein etu edellä mainitut Koodin luvattu versio on virheenkäsittely. Sen sijaan, että heittäisit vangittuja poikkeuksia ympäriinsä - kuten ei-luvattua versiota - asianmukaiset vikailmoitukset palautetaan ja kirjataan.

Mutta se ei ole vain palaavat n vikailmoitukset mutta myös asynkronisen laskennan tulos se voi olla meille todella edullista. Nähdäksesi tämän, meidän on laajennettava esimerkkiä.

Esimerkki 2

“Non-Promisified” koodi

Sen sijaan, että näytit vain tekstiä hello.txt, Haluan yhdistää se “Maailman” sana ja näytä se näytöllä 2 sekunnin kuluttua. Tässä on käytettävä koodi:

 toiminto getTxt () let xhr = uusi XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = toiminto () try switch (this.status) case 200: document.write (concatTxt (this.response)); tauko; tapaus 404: "Tiedosto ei löydy"; oletus: heittää 'Tiedoston nouto epäonnistui';  saalis (err) console.log (err);  function concatTxt (res) setTimeout (toiminto () return (res + 'World')), 2000);  getTxt (); 

Tilakoodilla 200, concatTxt () toiminto on kutsuttu yhdistää vastausteksti “Maailman” sana ennen sen kirjoittamista asiakirjaan.

Mutta tämä koodi ei toimi halutulla tavalla. setTimeout () takaisinsoitto-toiminto ei voi palauttaa yhdistettyä merkkijonoa. Mitä tulostetaan asiakirjaan, on määrittelemätön koska se on mitä concatTxt () tuotto.

“Promisified” koodi

Joten, jotta koodi toimisi, olkaamme Lupaa yllä oleva koodi, mukaan lukien concatTxt ():

 toiminto getTxt () palauta uusi Promise (toiminto (ratkaise, hylkää)) let xhr = uusi XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = toiminto () kytkin (this.status) tapaus 200: ratkaisu (tämä.response), tapaus 404: hylkää ('tiedosto ei löydy'), oletus: hylkää ('epäonnistui noutaa tiedosto ');;);  toiminto concatTxt (txt) palauta uusi lupaus (toiminto (ratkaista, hylkää) setTimeout (toiminto () resoluutio (txt + 'World');, 2000););  getTxt (). sitten ((txt) => return concatTxt (txt);). sitten ((txt) => document.write (txt);) .sauva ((err) => konsoli. log (err);); 

Ihan kuin getTxt (), concatTxt () toimivat myös palauttaa uuden Lupaus esine yhdistetyn tekstin sijaan. Lupaus palasi concatTxt () on ratkaistu sisäisen soittopyynnön sisällä setTimeout ().

Lähellä edellä mainitun koodin loppua ensimmäisen tapahtuman käsittelijä sitten() menetelmä toimii, kun Lupaus of getTxt () on täyttyvät, eli kun tiedosto on haettu onnistuneesti. Sisällä että käsittelijä, concatTxt () kutsutaan ja Lupaus palasi concatTxt () palautetaan.

Toisen tapahtuman käsittelijä sitten() menetelmä toimii, kun Lupaus palasi concatTxt () on täyttyvät, eli kahden sekunnin aikakatkaisu on ohi ja ratkaista() kutsutaan yhdistettynä merkkijono sen parametrina.

vihdoin, saada kiinni() vangitsee kaikki poikkeukset ja vikailmoitukset molemmista lupauksista.

Tässä lupaavassa versiossa “Hei maailma” merkkijono on tulostettu onnistuneesti asiakirjaan.