Početak korištenja JavaScript obećanja

Asinkroni kod je korisno za obavljanje zadataka koji su dugotrajan ali, naravno, to je nije lišen kontra. Async kod koristi povratne funkcije obraditi njegove rezultate, međutim, funkcije povratnog poziva ne može vratiti vrijednosti koje tipične JavaScript funkcije mogu.

Dakle, oni ne samo da nam oduzimaju sposobnost kontrole izvršavanje funkcije ali i napraviti rukovanje pogreškama malo gnjavaže. Ovo je mjesto gdje Obećanje objekt dolazi, jer želi ispuniti neke od rupe u asinkronom kodiranju.

Obećanje je tehnički a standardni unutarnji objekt u JavaScriptu, što znači da dolazi ugrađeni u JavaScript. Koristi se za predstavljanje eventualni rezultat asinkronog bloka koda (ili razlog zašto kôd nije uspio) i ima metode za kontrolu izvršavanje asinkronog koda.

Sintaksa

Možemo stvoriti primjer Obećanje objekt koristiti novi ključne riječi:

 novo obećanje (funkcija (rješenje, odbacivanje) ); 

Funkcija prošao kao parametar prema Obećanje() konstruktor je poznat kao izvršitelj. Ona sadrži asinkroni kod i ima dva parametra Funkcija tip, odnosi se kao odlučnost i odbiti funkcije (više o njima uskoro).

Države. \ T Obećanje objekt

početno stanje a Obećanje objekt se zove u tijeku. U ovom stanju rezultat asinkronog izračunavanja ne postoji.

Početno stanje na čekanju mijenja se u ispunjeni navedite kada je izračun uspješan. rezultat izračuna je dostupno u ovom stanju.

U slučaju asinkronog izračuna ne, Obećanje objekt se pomiče u odbijen stanje od početnog u tijeku država. U ovom stanju razlog kvara računanja (tj. poruka o pogrešci) je dostupna.

Da odem u tijeku do ispunjeni država, odlučnost() Zove se. Da odem u tijeku do odbijen država, odbiti() Zove se.

zatim i ulov metode

Kada je država promjene od u tijeku do ispunjeni, rukovatelj događaja Obećanje objekt je zatim način izvršava se. I, kada država promjene od u tijeku do odbijen, rukovatelj događaja Obećanje objekt je ulov način izvršava se.

Primjer 1

“Non-Promisified” kodirati

Pretpostavimo da postoji hello.txt datoteku koja sadrži “zdravo” riječ. Evo kako možemo napisati AJAX zahtjev dohvati tu datoteku i prikazati njezin sadržaj, bez korištenja Obećanje objekt:

 funkcija getTxt () neka xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / običan'); xhr.send (); xhr.onload = function () try switch (this.status) slučaj 200: document.write (this.response); pauza; slučaj 404: baciti "Datoteka nije pronađena"; zadano: bacite "Nije uspjelo dohvat datoteke";  catch (err) console.log (err);  getTxt (); 

Ako je sadržaj datoteke bio uspješno dohvaćeno, tj. šifra statusa odgovora je 200, tekst odgovora je u dokument. Ako je datoteka nije pronađeno (status 404), “Datoteka nije pronađena” izbačena je poruka o pogrešci. Inače, a općenitu poruku o pogrešci što ukazuje na neuspjeh prebacivanja datoteke.

“Promisified” kodirati

Sada, hajde Promovirajte gornji kod:

 function getTxt () return new Promise (funkcija (riješi, odbaci) neka xhr = nova XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: rije i (this.response); slu ~ aj 404: odbaci ('File Not Found'); default: odbaci ('Failed to dohvatiti datoteku ');;);  getTxt (). (funkcija (txt) document.write (txt);). catch (funkcija (err) console.log (err);); 

getTxt () Funkcija je sada kodirana vrati novu instancu Obećanje objekt, i njegova izvršna funkcija drži asinkroni kod od prije.

Kada šifra statusa odgovora je 200, Obećanje je ispunjeni po zvanje odlučnost() (odgovor se prenosi kao parametar od odlučnost()). Kada je statusni kôd 404 ili neki drugi, Obećanje je odbijen koristeći odbiti() (uz odgovarajuću poruku o pogrešci kao parametar od odbiti()).

događajima za zatim() i ulov() metode od Obećanje predmet su na kraju.

Kada Obećanje je ispunjeni, rukovatelj zatim() metoda je pokrenuta. Njegov je argument parametar je proslijeđen odlučnost(). Unutar rukovatelja događaja, tekst odgovora (primljen kao argument) jest u dokument.

Kada Obećanje je odbijen, rukovatelj događaja ulov() metoda je pokrenuta, zapisivanje pogreške.

glavna prednost Iznad promovirane inačice koda je rukovanje pogreškama. Umjesto bacanja Neobučenih Iznimki oko - kao u verziji koja nije promaknuta - odgovarajuće poruke o neuspjehu se vraćaju i zapisuju.

Ali, to nije samo povratak od poruke o neuspjehu ali i rezultat asinkronog izračunavanja to može biti zaista korisno za nas. Da bismo to vidjeli, moramo proširiti naš primjer.

Primjer 2

“Non-Promisified” kodirati

Umjesto samo prikazivanja teksta hello.txt, želim kombinirati s “Svijet” riječ i prikazati ga na zaslonu nakon isteka od 2 sekunde. Evo koda koji koristim:

 funkcija getTxt () neka xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / običan'); xhr.send (); xhr.onload = function () try switch (this.status) slučaj 200: document.write (concatTxt (this.response)); pauza; slučaj 404: baciti "Datoteka nije pronađena"; zadano: bacite "Nije uspjelo dohvat datoteke";  catch (err) console.log (err);  funkcija concatTxt (res) setTimeout (funkcija () return (res + 'World'), 2000);  getTxt (); 

Na statusnom kodu 200, concatTxt () funkcija je pozvana spojiti tekst odgovora sa “Svijet” riječ prije pisanja u dokument.

Ali, ovaj kod neće raditi po želji. setTimeout () povratni poziv ne može vratiti spojeni niz. Ono što će se ispisati u dokumentu je nedefiniran jer to je što concatTxt () vraća.

“Promisified” kodirati

Dakle, da bi kod funkcionirao, neka je Promovirajte gornji kod, uključujući concatTxt ():

 function getTxt () return new Promise (funkcija (riješi, odbaci) neka xhr = nova XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: rije i (this.response); slu ~ aj 404: odbaci ('File Not Found'); default: odbaci ('Failed to dohvatiti datoteku ');;);  funkcija concatTxt (txt) return new Promise (funkcija (rije i, odbaci) setTimeout (funkcija () rije i (txt + 'svijet');, 2000););  getTxt (), a zatim ((txt) => return concatTxt (txt);) tada ((txt) => document.write (txt);) catch ((err) => console. log (err);); 

Baš kao getTxt (), concatTxt () također vraća novo Obećanje objekt umjesto spojenog teksta. Obećanje vratio / la concatTxt () je riješen unutar povratne funkcije setTimeout ().

Pri kraju gornjeg koda, rukovatelj događajima prvog zatim() metoda pokreće se kada Obećanje od getTxt () je ispunjeni, tj. kada je datoteka uspješno dohvaćeno. Unutar tog vodiča, concatTxt () Zove se i Obećanje vratio / la concatTxt () se vraća.

Rukovalac događaja drugog zatim() metoda pokreće se kada Obećanje vratio / la concatTxt () je ispunjeni, tj 2 sekunde je istekao i odlučnost() Zove se s povezanim nizom kao svojim parametrom.

Konačno, ulov() hvata sve iznimke i poruke o neuspjehu obe obećanja.

U ovoj promoviranoj verziji “Pozdrav svijete” niz će biti uspješno ispisana na dokument.