Aan de slag met JavaScript-beloften

Asynchrone code is handig voor het uitvoeren van taken die dat wel zijn tijdrovend maar, natuurlijk, het is niet verstoken van nadelen. Async-code gebruikt callback-functies om de resultaten te verwerken, maar callback-functies kan geen waarden retourneren die typische JavaScript-functies kunnen.

Daardoor nemen ze niet alleen ons vermogen weg om het te beheersen uitvoering van de functie maar ook maken foutafhandeling een beetje gedoe. Dit is waar de Belofte voorwerp komt binnen, omdat het een aantal van de in te vullen gaten in asynchrone codering.

Belofte is technisch een standaard intern object in JavaScript, wat betekent dat het komt ingebouwd in JavaScript. Het wordt gebruikt om de uiteindelijke resultaat van een asynchroon codeblok (of de reden waarom de code mislukte) en heeft methoden om de uitvoering van de asynchrone code.

Syntaxis

We kunnen creëren een instantie van de Belofte voorwerp de ... gebruiken nieuwe trefwoord:

 nieuwe belofte (functie (oplossen, weigeren) ); 

De functie geslaagd als een parameter naar de Belofte() constructor staat bekend als de uitvoerder. Het bevat de asynchrone code en heeft twee parameters van de Functie type, verwezen naar Als oplossen en afwijzen functies (meer hierover binnenkort).

Staten van de Belofte voorwerp

De oorspronkelijke toestand van een Belofte object wordt genoemd in afwachting. In deze staat het resultaat van de asynchrone berekening bestaat niet.

De initiële status in behandeling verandert in vervuld staat wanneer de berekening is geslaagd. De resultaat van de berekening is in deze staat beschikbaar.

In het geval van de asynchrone berekening mislukt, de Belofte object wordt verplaatst naar de verworpen staat vanaf de initiaal in afwachting staat. In deze staat, de reden van de mislukte berekening (d.w.z. foutboodschap) beschikbaar wordt gemaakt.

Om vanaf te gaan in afwachting naar vervuld staat, op te lossen () wordt genoemd. Om vanaf te gaan in afwachting naar verworpen staat, verwerpen () wordt genoemd.

De dan en vangst methoden

Wanneer de staat verandert van in afwachting naar vervuld, de gebeurtenishandler van de Belofte voorwerpen dan methode is geëxecuteerd. En, wanneer de staat verandert van in afwachting naar verworpen, de gebeurtenishandler van de Belofte voorwerpen vangst methode is geëxecuteerd.

voorbeeld 1

“Non-Promisified” code

Neem aan dat er een is hello.txt bestand met de “Hallo” woord. Hier is hoe we een AJAX-aanvraag kunnen schrijven haal dat bestand op en toon de inhoud, zonder gebruik van de Belofte voorwerp:

 functie getTxt () let xhr = new 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); breken; case 404: gooi 'File Not Found'; default: throw 'Kan het bestand niet ophalen';  catch (err) console.log (err);  getTxt (); 

Als de inhoud van het bestand is geweest succesvol opgehaald, d.w.z. de antwoordstatuscode is 200, de antwoordtekst is geschreven in het document. Als het bestand is niet gevonden (status 404), een “Bestand niet gevonden” foutmelding wordt gegooid. Anders, a algemene foutmelding die aangeeft dat het ophalen van het bestand mislukt is.

“Promisified” code

Laten we nu Promisify de bovenstaande code:

 functie getTxt () return new Promise (functie (lossen, weigeren) laat xhr = nieuwe XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolve (this.response); case 404: reject ('File Not Found'); default: reject ('Failed to haal het bestand op ');;);  getTxt (). then (function (txt) document.write (txt);). catch (functie (err) console.log (err);); 

De getTxt () functie is nu gecodeerd retourneer een nieuw exemplaar van de Belofte voorwerp, en de uitvoerderfunctie bevat de asynchrone code van vroeger.

Wanneer de antwoordstatuscode is 200, de Belofte is vervuld door roeping op te lossen () (het antwoord wordt doorgegeven als de parameter van op te lossen ()). Wanneer de statuscode 404 of een andere is, de Belofte is verworpen gebruik makend van verwerpen () (met de juiste foutmelding als de parameter van verwerpen ()).

De event handlers voor de dan() en vangst() methoden van de Belofte object zijn toegevoegd aan het einde.

Wanneer de Belofte is vervuld, de handler van de dan() methode wordt uitgevoerd. Het argument is de parameter gepasseerd van op te lossen (). Binnen de gebeurtenishandler is de antwoordtekst (ontvangen als het argument) geschreven in het document.

Wanneer de Belofte is verworpen, de gebeurtenishandler van de vangst() methode wordt uitgevoerd, het loggen van de fout.

De grootste voordeel van de bovenstaande Promisified-versie van de code is de foutafhandeling. In plaats van het gooien van niet-afgevangen uitzonderingen rond - zoals in de niet-gepromote versie - de passende foutmeldingen worden teruggestuurd en ingelogd.

Maar het is niet alleen het terugkerende van de foutmeldingen maar ook van de resultaat van de asynchrone berekening dat kan echt voordelig voor ons zijn. Om dat te zien, moeten we ons voorbeeld uitbreiden.

Voorbeeld 2

“Non-Promisified” code

In plaats van alleen de tekst weer te geven hello.txt, ik wil combineer het met de “Wereld” woord en toon het op het scherm na een time-out van 2 seconden. Dit is de code die ik gebruik:

 functie getTxt () let xhr = new 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)); breken; case 404: gooi 'File Not Found'; default: throw 'Kan het bestand niet ophalen';  catch (err) console.log (err);  functie concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

Op de statuscode 200, de concatTxt () functie wordt aangeroepen de reactietekst samenvoegen met de “Wereld” woord voordat je het in een document schrijft.

Maar deze code zal niet werken zoals gewenst. De setTimeout () callback-functie kan de aaneengeschakelde reeks niet retourneren. Wat wordt afgedrukt naar het document is onbepaald omdat dat is wat concatTxt () komt terug.

“Promisified” code

Dus, om de code te laten werken, laten we het doen Promisify de bovenstaande code, inclusief concatTxt ():

 functie getTxt () return new Promise (functie (lossen, weigeren) laat xhr = nieuwe XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolve (this.response); case 404: reject ('File Not Found'); default: reject ('Failed to haal het bestand op ');;);  functie concatTxt (txt) return new Promise (function (resolve, reject) setTimeout (function () resolve (txt + 'World');, 2000););  getTxt (). then ((txt) => return concatTxt (txt);). then ((txt) => document.write (txt);) catch ((err) => console. log (err);); 

Net als getTxt (), de concatTxt () functie ook geeft een nieuw terug Belofte voorwerp in plaats van de samengevoegde tekst. De Belofte teruggegeven door concatTxt () is opgelost binnen de callback-functie van setTimeout ().

Tegen het einde van de bovenstaande code, de gebeurtenishandler van de eerste dan() methode wordt uitgevoerd wanneer de Belofte van getTxt () is vervuld, d.w.z. wanneer het bestand is succesvol opgehaald. In die handler, concatTxt () wordt genoemd en de Belofte teruggegeven door concatTxt () wordt teruggestuurd.

De gebeurtenishandler van de tweede dan() methode wordt uitgevoerd wanneer de Belofte teruggegeven door concatTxt () is vervuld, dat wil zeggen de de time-out van twee seconden is voorbij en op te lossen () wordt genoemd met de aaneengeschakelde reeks als parameter.

Tenslotte, vangst() vangt alle uitzonderingen en foutmeldingen op van beide Beloften.

In deze Promisified-versie, de “Hallo Wereld” string zal zijn succesvol uitgeprint naar het document.