Komme i gang med JavaScript-løfter

Asynkron kode er nyttig for å utføre oppgaver som er tidkrevende men selvfølgelig er det det ikke blottet for ulemper. Async-kode bruker tilbakeringingsfunksjoner å behandle sine resultater, men tilbakekallingsfunksjoner kan ikke returnere verdier som typiske JavaScript-funksjoner kan.

Dermed tar de ikke bare vår evne til å kontrollere utførelse av funksjonen men også gjøre feilhåndtering litt stresset. Det er her Love gjenstand kommer inn, da den tar sikte på å fylle ut noen av potholes i asynkron koding.

Love er teknisk a standard intern objekt i JavaScript, noe som betyr at den kommer innebygd i JavaScript. Det er vant til å representere eventuelt resultat av en asynkron kodeblokk (eller grunnen til at koden mislyktes) og har metoder for å kontrollere utførelse av den asynkrone koden.

syntax

Vi kan lage en forekomst av Love gjenstand bruker ny søkeord:

 nytt løfte (funksjon (løse, avvise) ); 

Funksjonen passert som en parameter til Love() Konstruktøren er kjent som byrder. Den har asynkron kode og har to parametere av Funksjon type, referert til som Løse og avvise funksjoner (mer om disse kort tid).

Stater av Love gjenstand

De opprinnelige tilstand av a Love objekt kalles i påvente av. I denne tilstanden er resultatet av den asynkrone beregningen eksisterer ikke.

Den innledende ventende tilstanden endres til oppfylt angi når beregningen er vellykket. De Resultatet av beregningen er tilgjengelig i denne tilstanden.

I tilfelle asynkron beregning mislykkes, de Love objektet beveger seg til avvist Stat fra begynnelsen i påvente av stat. I denne tilstanden, den grunnen til beregningsfeilen (dvs. feilmelding) blir gjort tilgjengelig.

Å gå fra i påvente av til oppfylt stat, Løse() er kalt. Å gå fra i påvente av til avvist stat, avvise () er kalt.

De deretter og å fange fremgangsmåter

Når staten endringer fra i påvente av til oppfylt, hendelseshåndterer av Love objektets deretter metode er utført. Og når staten endringer fra i påvente av til avvist, hendelseshåndterer av Love objektets å fange metode er utført.

Eksempel 1

“Ikke-Promisified” kode

Anta at det er en hello.txt fil som inneholder “Hallo” ord. Slik kan vi skrive en AJAX-forespørsel til hente den filen og vis innholdet, uten å bruke Love gjenstand:

 funksjon getTxt () la 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); gå i stykker; tilfelle 404: kaste 'fil ikke funnet'; standard: kaste 'Kunne ikke hente filen';  catch (err) console.log (err);  getTxt (); 

Hvis innholdet i filen har vært vellykket hentet, dvs. svarstatuskoden er 200, svarteksten er skrevet inn i dokumentet. Hvis filen er ikke funnet (status 404), en “Fil ikke funnet” feilmelding kastes. Ellers a generell feilmelding Det angis at feilen i hentingen av filen er kastet.

“Promisified” kode

La oss nå Promisifiser koden ovenfor:

 funksjon getTxt () return new Promise (funksjon (løs, avvis) la xhr = ny XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) tilfelle 200: løse (this.response); tilfelle 404: avvise ('Fil ikke funnet'); standard: avvis hente filen ');;);  getTxt (). deretter (funksjon (txt) document.write (txt);). catch (funksjon (err) console.log (err);); 

De getTxt () funksjonen er nå kodet til returnere en ny forekomst av Love gjenstand, og dens eksekveringsfunksjon holder den asynkrone koden fra før.

Når svarstatuskode er 200, de Love er oppfylt av ringer Løse() (svaret er bestått som parameter for Løse()). Når statuskoden er 404 eller noe annet, vil Love er avvist ved hjelp av avvise () (med riktig feilmelding som parameter for avvise ()).

De hendelseshåndterer for deretter() og å fange() fremgangsmåter av Love objekt er lagt til på slutten.

Når Love er oppfylt, håndterer av deretter() metoden kjøres. Dets argument er parameteren gikk fra Løse(). Inne i hendelsesbehandleren er svarteksten (mottatt som argumentet) skrevet inn i dokumentet.

Når Love er avvist, hendelseshåndterer av å fange() metoden kjøres, logger feilen.

De hovedfordel av ovennevnte Promisified versjon av koden er feilhåndtering. I stedet for å kaste Uncaught Unntak rundt - som i den ikke-Promisified versjonen - The passende feilmeldinger returneres og logges.

Men det er ikke bare retur av feilmeldinger men også av Resultatet av den asynkrone beregningen som kan være virkelig fordelaktig for oss. For å se det, må vi utvide vårt eksempel.

Eksempel 2

“Ikke-Promisified” kode

I stedet for bare å vise teksten fra hello.txt, Jeg vil kombinere den med “Verden” ord og vis den på skjermen etter en time-out på 2 sekunder. Her er koden jeg bruker:

 funksjon getTxt () la 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)); gå i stykker; tilfelle 404: kaste 'fil ikke funnet'; standard: kaste 'Kunne ikke hente filen';  catch (err) console.log (err);  funksjon concatTxt (res) setTimeout (funksjon () return (res + 'World'), 2000);  getTxt (); 

På statuskoden 200, er concatTxt () funksjonen kalles til sammenkoble svarteksten med “Verden” ord før du skriver det inn i dokumentet.

Men denne koden vil ikke fungere som ønsket. De setTimeout () tilbakeringingsfunksjon kan ikke returnere den sammenkædede strengen. Det som skal skrives ut til dokumentet, er udefinert fordi det er hva concatTxt () avkastning.

“Promisified” kode

Så, for å få koden til å fungere, la oss Promisifiser koden ovenfor, gjelder også concatTxt ():

 funksjon getTxt () return new Promise (funksjon (løs, avvis) la xhr = ny XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) tilfelle 200: løse (this.response); tilfelle 404: avvise ('Fil ikke funnet'); standard: avvis hente filen ');;);  funksjon concatTxt (txt) return new Promise (funksjon (løse, avvise) setTimeout (function () resolve (txt + 'World');, 2000););  getTxt (). da ((txt) => return concatTxt (txt);) .Til ((txt) => document.write (txt);) .fangst ((err) => konsoll. logg (feil);); 

Akkurat som getTxt (), de concatTxt () funksjon også returnerer en ny Love gjenstand i stedet for den sammenkalte teksten. De Love returnert av concatTxt () er løst innen tilbakeringingsfunksjon av setTimeout ().

Nær slutten av den ovennevnte koden, hendelsen handler av den første deretter() Metoden kjører når Love av getTxt () er oppfylt, dvs. når filen er hentet vellykket. Inne i den håndteringen, concatTxt () er kalt og Love returnert av concatTxt () returneres.

Hendelsen handler av den andre deretter() Metoden kjører når Love returnert av concatTxt () er oppfylt, dvs. to sekunder time-out er over og Løse() er kalt med den sammenkædede strengen som dens parameter.

Endelig, å fange() fanger alle unntak og feilmeldinger fra begge løftene.

I denne Promisified versjonen, the “Hei Verden” streng vil være vellykket utskrift til dokumentet.