Kom i gang med JavaScript løfter

Asynkron kode er nyttigt til at udføre opgaver, der er tidskrævende men det er selvfølgelig ikke blottet for ulemper. Async-kode bruger tilbagekaldsfunktioner at behandle sine resultater, men tilbagekald funktioner kan ikke returnere værdier at typiske JavaScript-funktioner kan.

Således tager de ikke kun vores evne til at styre udførelse af funktionen men også gøre fejlhåndtering lidt besvær. Det er her Løfte objekt kommer ind, da det har til formål at udfylde nogle af potholes i asynkron kodning.

Løfte er teknisk a standard intern objekt i JavaScript, hvilket betyder, at det kommer indbygget i JavaScript. Det er vant til at repræsentere eventuelt resultat af en asynkron kodeblok (eller årsagen til, at koden mislykkedes) og har metoder til at kontrollere udførelse af den asynkrone kode.

Syntaks

Vi kan skabe en forekomst af Løfte objekt bruger ny søgeord:

 nyt løfte (funktion (løse, afvise) ); 

Funktionen bestået som en parameter til Løfte() konstruktør er kendt som eksekutor. Den indeholder asynkron kode og har to parametre af Fungere type, benævnt beslutte og afvise funktioner (mere om disse kort tid).

Staterne i Løfte objekt

Det indledende tilstand af a Løfte objekt kaldes verserende. I denne tilstand er resultatet af den asynkrone beregning eksisterer ikke.

Den oprindelige ventende tilstand ændres til opfyldt Angiv når beregningen er vellykket. Det Resultatet af beregningen er tilgængelig i denne tilstand.

I tilfælde af asynkron beregning mislykkes, det Løfte objekt flytter til afvist stat fra sin oprindelige verserende stat. I denne tilstand årsagen til beregningsfejlen (dvs. fejlmeddelelse) stilles til rådighed.

At gå fra verserende til opfyldt stat, beslutte() Hedder. At gå fra verserende til afvist stat, afvise() Hedder.

Det derefter og fangst metoder

Når staten ændres fra verserende til opfyldt, hændelseshandleren af Løfte objektets derefter metode udføres. Og når staten ændres fra verserende til afvist, hændelseshandleren af Løfte objektets fangst metode udføres.

Eksempel 1

“Ikke-Promisified” kode

Antag, at der er en hej.txt fil indeholdende “Hej” ord. Sådan kan vi skrive en AJAX-anmodning til hent den pågældende fil og Vis indholdet, uden at bruge Løfte objekt:

 funktion getTxt () let xhr = ny XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = function () prøv switch (this.status) case 200: document.write (this.response); pause; sag 404: kaste 'fil ikke fundet'; default: throw 'Kunne ikke hente filen';  catch (err) console.log (err);  getTxt (); 

Hvis indholdet af filen har været hentes med succes, dvs.. svarstatuskoden er 200, svarteksten er skrevet ind i dokumentet. Hvis filen er ikke fundet (status 404), -en “Fil ikke fundet” fejlmeddelelse kastes. Ellers a generel fejlmeddelelse Indikerer manglende hentning af filen kastes.

“Promisified” kode

Lad os nu Bekræft ovenstående kode:

 funktion getTxt () return new Promise (funktion (opløs, afvis) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolve (this.response); sag 404: afvis ('Fil ikke fundet'); default: reject hent filen ');;);  getTxt (). derefter (funktion (txt) document.write (txt);). catch (funktion (err) console.log (err);); 

Det getTxt () funktionen er nu kodet til returnere en ny forekomst af Løfte objekt, og dens eksekveringsfunktion holder den asynkrone kode fra før.

Når svar status kode er 200, det Løfte er opfyldt ved ringer beslutte() (svaret er bestået som parameter for beslutte()). Når statuskoden er 404 eller nogle andre, er den Løfte er afvist ved brug af afvise() (med den relevante fejlmeddelelse som parameter for afvise()).

Det hændelseshåndtering til derefter() og fangst() metoder af Løfte objekt er tilføjet i slutningen.

Når Løfte er opfyldt, håndterer af derefter() Metoden køres. Dets argument er parameteren gik fra beslutte(). Inde i begivenhedshåndteringen er svarteksten (modtaget som argumentet) skrevet ind i dokumentet.

Når Løfte er afvist, hændelseshandleren af fangst() Metoden køres, logger fejlen.

Det største fordel af ovenstående Promisified version af koden er fejlhåndtering. I stedet for at smide Uncaught Exceptions rundt - ligesom i den ikke-Promised version - The passende fejlmeddelelser returneres og logges.

Men det er ikke bare den returnering af fejlmeddelelser men også af Resultat af den asynkrone beregning det kan være virkelig fordelagtigt for os. For at se det, skal vi udvide vores eksempel.

Eksempel 2

“Ikke-Promisified” kode

I stedet for blot at vise teksten fra hej.txt, jeg vil gerne kombinere det med “Verden” ord og vis det på skærmen efter en timeout på 2 sekunder. Her er koden jeg bruger:

 funktion getTxt () let xhr = ny XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = function () prøv switch (this.status) case 200: document.write (concatTxt (this.response)); pause; sag 404: kaste 'fil ikke fundet'; default: throw 'Kunne ikke hente filen';  catch (err) console.log (err);  funktion concatTxt (res) setTimeout (funktion () return (res + 'World'), 2000);  getTxt (); 

På statuskode 200, den concatTxt () funktion kaldes til sammenkoble svarteksten med “Verden” ord før du skriver det i dokument.

Men denne kode vil ikke fungere som ønsket. Det setTimeout () tilbagekaldsfunktion kan ikke returnere den sammenkædede streng. Hvad der skal udskrives til dokumentet er undefined fordi det er hvad concatTxt () vender tilbage.

“Promisified” kode

Så for at få koden til at fungere, lad os Bekræft ovenstående kode, inklusive concatTxt ():

 funktion getTxt () return new Promise (funktion (opløs, afvis) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolve (this.response); sag 404: afvis ('Fil ikke fundet'); default: reject hent filen ');;);  funktion concatTxt (txt) return nyt Promise (funktion (opløs, afvis) setTimeout (funktion () resolve (txt + 'World');, 2000););  getTxt (). derefter ((txt) => return concatTxt (txt);) .Til ((txt) => document.write (txt);) .fang ((err) => konsol. log (err);); 

Ligesom getTxt (), det concatTxt () funktion også returnerer en ny Løfte objekt i stedet for den sammenfattede tekst. Det Løfte returneret af concatTxt () er løst indenfor tilbagekaldsfunktionen af setTimeout ().

I slutningen af ​​ovenstående kode er begivenhedshåndteringen af ​​den første derefter() Metoden kører, når Løfte af getTxt () er opfyldt, dvs. når filen er hentet med succes. Inde i den håndterer, concatTxt () Hedder og Løfte returneret af concatTxt () returneres.

Hændelseshåndteringen af ​​den anden derefter() Metoden kører, når Løfte returneret af concatTxt () er opfyldt, dvs. to sekunder time-out er overstået og beslutte() Hedder med den sammenkædede streng som dens parameter.

Langt om længe, fangst() fanger alle undtagelser og fejlmeddelelser fra begge løfter.

I denne Promisified version, den “Hej Verden” streng vil være Udskrives med succes til dokumentet.