Uvod v obljube JavaScript

Asinhrona koda je uporaben za izvajanje nalog, ki so zamudno ampak, seveda, je ne smejo biti brez slabosti. Uporablja se koda Async funkcije povratnega klica za obdelavo rezultatov, vendar funkcije povratnega klica ne more vrniti vrednosti tipične funkcije JavaScript.

Tako ne odvzamejo samo naše sposobnosti za obvladovanje izvedbo funkcije ampak tudi narediti ravnanje z napakami malo težav. Tukaj je Obljubi predmet prihaja, ker želi izpolniti nekatere luknje v asinhronem kodiranju.

Obljubi je tehnično a standardni notranji predmet v JavaScriptu, kar pomeni, da prihaja vgrajeno v JavaScript. Uporablja se za predstavitev morebitni rezultat asinhronskega kodnega bloka (ali razlog, zakaj koda ni uspela) in ima metode za nadzor izvajanje asinhrone kode.

Sintaksa

Lahko ustvarimo primer Obljubi predmet uporabljati novo ključna beseda:

 nova obljuba (funkcija (razreši, zavrni) ); 

Funkcija kot parameter do Obljuba () konstruktor je znan kot izvršitelj. Vsebuje asinhrono kodo in ima dva parametra Funkcija vrsto, kot je navedeno rešiti in zavrni funkcije (več o tem v kratkem).

Države članice. \ T Obljubi predmet

The začetno stanje a Obljubi se imenuje predmet v teku. V tem stanju je rezultat asinhronega izračuna ne obstaja.

Začetno stanje čakanja se spremeni v izpolnjeni navedite, kdaj je računanje uspešno. The rezultat izračuna je na voljo v tem stanju.

V primeru asinhronega izračuna ne uspe, Obljubi predmet premakne v zavrnjena od začetne v teku država. V tem stanju neuspeha računanja (to je sporočilo o napaki).

Oditi od v teku do izpolnjeni država, razreši () je poklican. Oditi od v teku do zavrnjena država, zavrni () je poklican.

The potem in ulov metod

Ko je država spremembe od v teku do izpolnjeni, vodja dogodka Obljubi predmet potem metodo se izvede. In, ko država spremembe od v teku do zavrnjena, vodja dogodka Obljubi predmet ulov metodo se izvede.

Primer 1

“Ni odobreno” Koda

Recimo, da obstaja hello.txt datoteko, ki vsebuje “zdravo” besedo. Na ta način lahko napišemo zahtevo za AJAX prenesi to datoteko in prikazati njeno vsebino, brez uporabe Obljubi predmet:

 funkcija getTxt () naj xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) primer 200: document.write (this.response); odmor; primer 404: vrgel 'datoteko ni najden'; privzeto: met 'Ne morem pridobiti datoteke';  catch (err) console.log (napačno);  getTxt (); 

Če je bila vsebina datoteke uspešno preneseno, t.j.. koda statusa odgovora je 200, besedilo odgovora je v dokumentu. Če je datoteka ni najdeno (status 404), a “Datoteka ni najdena” vrne sporočilo o napaki. V nasprotnem primeru a sporočilo o splošni napaki ki označuje neuspeh pri pridobivanju datoteke, se vrne.

“Promovirano” Koda

Zdaj pa Sporočite zgornjo kodo:

 function getTxt () return new Promise (funkcija (razreši, zavrni) naj xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) primer 200: razreši (this.response); primer 404: zavrni ('File Not Found'); privzeto: zavrni ('Failed to naloži datoteko ');;);  getTxt (). (funkcija (txt) document.write (txt);). catch (funkcija (napačno) console.log (err);); 

The getTxt () Funkcija je zdaj kodirana vrne nov primerek Obljubi predmet, in njegova izvršilna funkcija zadrži asinhrono kodo od prej.

Ko koda statusa odziva je 200, Obljubi je izpolnjeni jo kliče razreši () (odgovor se prenese kot parameter za razreši ()). Ko je statusna koda 404 ali kakšna druga, Obljubi je zavrnjena uporabo zavrni () (z ustreznim sporočilom o napaki kot parameter za. \ t zavrni ()).

The . \ t nato () in catch () metod od Obljubi predmet dodano na koncu.

Ko Obljubi je izpolnjeni, vodnik nato () teče metoda. Njegov argument je parameter, ki je prešel iz razreši (). V upravljalniku dogodkov je besedilo odgovora (prejeto kot argument) v dokumentu.

Ko Obljubi je zavrnjena, vodja dogodka catch () teče metoda, beleženje napake.

The prednost od zgoraj Promovirana različica kode je ravnanje z napakami. Namesto, da bi nekontrolirane izjeme vrgli okoli - tako kot v različici brez promocije - ustreznih sporočil o napaki se vrnejo in zabeležijo.

Ampak to ni samo vrnitev od sporočil o napaki ampak tudi rezultat asinhronega izračuna to je lahko za nas resnično ugodno. Da bi to videli, bomo morali razširiti naš primer.

Primer 2

“Ni odobreno” Koda

Namesto prikazovanja besedila hello.txt, hočem združite z “Svet” besedo in ga prikažete na zaslonu po 2 sekundah. Tukaj je koda, ki jo uporabljam:

 funkcija getTxt () naj xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) primer 200: document.write (concatTxt (this.response)); odmor; primer 404: vrgel 'datoteko ni najden'; privzeto: met 'Ne morem pridobiti datoteke';  catch (err) console.log (napačno);  funkcija concatTxt (res) setTimeout (funkcija () return (res + 'World'), 2000);  getTxt (); 

Na statusni kodi 200, concatTxt () funkcijo besedilo odgovora povežite z “Svet” besedo pred pisanjem v dokument.

Ampak, ta koda ne bo delovalo po želji. The setTimeout () funkcija povratnega klica ne more vrniti združenega niza. Tisto, kar bo natisnjeno v dokument, je nedoločeno ker je to kaj concatTxt () vrne.

“Promovirano” Koda

Torej, da bi kodo delali, dajmo Sporočite zgornjo kodo, vključno z concatTxt ():

 function getTxt () return new Promise (funkcija (razreši, zavrni) naj xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) primer 200: razreši (this.response); primer 404: zavrni ('File Not Found'); privzeto: zavrni ('Failed to naloži datoteko ');;);  funkcija concatTxt (txt) vrne novo Promise (funkcija (razreši, zavrni) setTimeout (funkcija () razreši (txt + 'Svet');, 2000););  getTxt (), nato ((txt) => vrne concatTxt (txt);), nato ((txt) => document.write (txt);) catch ((err) => console. log (napačno);); 

Tako kot getTxt (), concatTxt () funkcijo vrne novo Obljubi predmet namesto združenega besedila. The Obljubi vrnil concatTxt () je razrešena znotraj funkcije povratnega klica setTimeout ().

Konec zgornje kode, vodja dogodka prvega nato () metoda teče, ko Obljubi od getTxt () je izpolnjeni, ko je datoteka uspešen. Znotraj tega vodnika, concatTxt () je poklican in Obljubi vrnil concatTxt () vrne.

Upravljavec dogodka drugega nato () metoda teče, ko Obljubi vrnil concatTxt () je izpolnjeni, t.j. Časovna omejitev dveh sekund je končana in razreši () je poklican s povezanim nizom kot svojim parametrom.

Končno, catch () ujema vsa izjeme in sporočila o napakah iz obeh obljub.

V tej Razširjeni različici “Pozdravljen, svet” niz bo uspešno natisnjeno v dokument.