Alustamine JavaScript lubadustega

Asünkroonne kood on kasulik ülesannete täitmiseks aega võttev aga muidugi see on puuduvad miinused. Async-kood kasutab tagasihelistamise funktsioonid tulemuste töötlemiseks, aga tagasihelistamisfunktsioonid ei saa väärtusi tagastada et tüüpilised JavaScript-funktsioonid saavad.

Seega ei võta nad mitte ainult oma võimet kontrollida funktsiooni täitmist aga ka teha vigade käsitlemine natuke vaeva. See on koht, kus Lubadus objekti tuleb, sest selle eesmärk on täita mõned asünkroonse kodeerimise potholes.

Lubadus on tehniliselt a standardne sisemine objekt JavaScriptis tähendab see seda sisseehitatud JavaScript. Seda kasutatakse asünkroonse koodiploki lõpptulemus (või põhjus, miks kood ebaõnnestus) ja on meetodid selle juhtimiseks asünkroonse koodi täitmine.

Süntaksi

Me saame luua näiteks Lubadus objekti kasutades uus märksõna:

 uus Promise (funktsioon (lahendada, tagasi lükata) ); 

Funktsioon parameetrina Euroopa Lubadus () konstruktor on tuntud kui täitja. Sellel on asünkroonne kood ja on kaks parameetrit Funktsioon tüüp, nimetatakse lahendada ja lükake tagasi funktsioonid (nendest peagi lähemalt).

Euroopa riigid Lubadus objekti

The esialgne olek a Lubadus objekti nimetatakse ootel. Selles olekus asünkroonse arvutamise tulemus ei eksisteeri.

Algne ootel olek muutub täidetud olek, millal arvutus on edukas. The arvutamise tulemus on saadaval selles olekus.

Asünkroonse arvutuse korral ebaõnnestub, the Lubadus objekt liigub tagasi lükatud oleku algusest ootel olekus. Selles olekus arvutamise ebaõnnestumise tõttu (st veateade) on saadaval.

Mine ootel kuni täidetud olekus, lahenda () kutsutakse. Mine ootel kuni tagasi lükatud olekus, lükkama () kutsutakse.

The siis ja saak meetodid

Kui riik muutub ootel kuni täidetud, sündmuse käitleja Lubadus objekti siis meetod täidetakse. Ja kui riik muutub ootel kuni tagasi lükatud, sündmuse käitleja Lubadus objekti saak meetod täidetakse.

Näide 1

“Lubamatu” kood

Oletame, et seal on hello.txt faili, mis sisaldab “Tere” sõna. Siin on, kuidas me saame AJAXi taotluse kirjutada tõmba see fail ja näidata selle sisu, ilma Lubadus objekt:

 funktsioon getTxt () let xhr = uus XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (this.response); murda; juhtum 404: „Ei leitud faili”; vaikimisi: viska 'Faili hankimine ebaõnnestus';  saak (err) console.log (err);  getTxt (); 

Kui faili sisu on olnud edukalt tõmmatud, s.t.. vastuse olekukood on 200, vastuse tekst on dokumentidesse. Kui fail on ei leitud (olek 404), a “Faili ei leitud” veateade visatakse. Vastasel korral a üldine veateade näitab, et fail on tõmmatud.

“Lubatud” kood

Nüüd, let's Lubage ülalnimetatud koodi:

 funktsioon getTxt () tagasi uus Promise (funktsioon (lahendada, lükkama) let xhr = uus XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = funktsioon () switch (this.status) case 200: lahendamine (this.response); juhtum 404: tagasilükkamine ('fail ei leitud'); vaikimisi: lükake ("ebaõnnestus faili tõmmata ');;);  getTxt () siis (funktsioon (txt) document.write (txt);). saak (funktsioon (err) console.log (err);); 

The getTxt () funktsioon on nüüd kodeeritud tagastab uue Lubadus objekti, ja selle täitja funktsioon omab eelnevalt asünkroonset koodi.

Kui vastuse olekukood on 200, the Lubadus on täidetud kõrval helistamine lahenda () (vastus edastatakse parameetrina lahenda ()). Kui olekukood on 404 või mõni muu, siis Lubadus on tagasi lükatud kasutades lükkama () (koos sobiva veateate parameetriga. \ t lükkama ()).

The sündmuste käitlejad siis () ja saak () meetodid selle Lubadus objekt on lõpus.

Kui Lubadus on täidetud, käitleja siis () meetodit. Tema argument on parameeter möödas lahenda (). Sündmuste käitleja sees on vastuse tekst (mis on esitatud argumentina) dokumentidesse.

Kui Lubadus on tagasi lükatud, sündmuse käitleja saak () meetodit, vea logimine.

The peamine eelis eeltoodud koodist on lubatud vigade käsitlemine. Selle asemel, et visata püütud erandeid ümber - nagu lubamatu versiooni -, on asjakohased tõrketeated tagastatakse ja logitakse.

Aga see pole ainult naasmine selle tõrketeated kuid ka asünkroonse arvutamise tulemus see võib olla meile tõeliselt kasulik. Selle nägemiseks peame laiendama meie eeskuju.

Näide 2

“Lubamatu” kood

Selle asemel, et lihtsalt teksti näidata hello.txt, Ma tahan ühendage see “Maailm” sõna ja kuvada see ekraanil pärast 2 sekundi möödumist. Siin on kasutatav kood:

 funktsioon getTxt () let xhr = uus XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (concatTxt (this.response)); murda; juhtum 404: „Ei leitud faili”; vaikimisi: viska 'Faili hankimine ebaõnnestus';  saak (err) console.log (err);  function concatTxt (res) setTimeout (funktsioon () return (res + 'World')), 2000);  getTxt (); 

Olekukoodil 200 on concatTxt () funktsiooni kutsutakse ühendage vastuse tekst “Maailm” sõna enne dokumendi kirjutamist.

Aga see kood ei tööta soovitud viisil. The setTimeout () tagasihelistamise funktsioon ei saa tagastatud ahelat tagasi saata. See, mis dokumendile trükitakse, on määratlemata sest see on mida concatTxt () naaseb.

“Lubatud” kood

Niisiis, et kood toimiks, olgem Lubage ülalnimetatud koodi, kaasa arvatud concatTxt ():

 funktsioon getTxt () tagasi uus Promise (funktsioon (lahendada, lükkama) let xhr = uus XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = funktsioon () switch (this.status) case 200: lahendamine (this.response); juhtum 404: tagasilükkamine ('fail ei leitud'); vaikimisi: lükake ("ebaõnnestus faili tõmmata ');;);  function concatTxt (txt) tagasi uus Promise (funktsioon (lahendada, lükkama) setTimeout (funktsioon () resolutiiv (txt + 'World');, 2000););  getTxt ()., siis ((txt) => return concatTxt (txt);), siis ((txt) => document.write (txt);) saak ((err) => konsool. log (err);); 

Just nagu getTxt (), the concatTxt () funktsiooni tagastab uue Lubadus objekti koondatud teksti asemel. The Lubadus tagasi concatTxt () on lahendatud sees setTimeout ().

Eespool nimetatud koodi lõpus on esimese sündmuse käitleja siis () meetod töötab siis, kui Lubadus of getTxt () on täidetud, see tähendab, kui fail on õnnestus. Selle käitleja sees, concatTxt () kutsutakse ja Lubadus tagasi concatTxt () tagastatakse.

Teise sündmuse käitleja siis () meetod töötab siis, kui Lubadus tagasi concatTxt () on täidetud, st kaks sekundit on aegunud ja lahenda () kutsutakse kui selle parameetriks on lingitud string.

Lõpuks, saak () püüab kõik erandid ja tõrketeated mõlemast lubadusest.

Selles tõotatud versioonis “Tere, Maailm” string on edukalt välja trükitud dokumendile.