Noțiuni de bază cu promisiunile JavaScript

Cod asincron este util pentru îndeplinirea sarcinilor care sunt consumă timp dar, desigur, este nu lipsit de cons. Codul Async utilizează funcții de apel invers pentru a procesa rezultatele sale, cu toate acestea funcțiile callback nu pot returna valorile că funcțiile tipice JavaScript pot.

Astfel, ei nu numai că își îndepărtează capacitatea de a controla executarea funcției dar, de asemenea, face eroare de manipulare un pic de hassle. Aici este locul unde Promisiune obiect vine, având în vedere că intenționează să completeze unele dintre ele gropi în codificare asincronă.

Promisiune este tehnic obiect intern obișnuit în JavaScript, ceea ce înseamnă că vine încorporat în JavaScript. Este folosit pentru a reprezenta eventual rezultat al unui bloc de cod asincron (sau motivul pentru care codul a eșuat) și are metode pentru a controla executarea codului asincron.

Sintaxă

Putem crea o instanță a Promisiune obiect folosind nou cuvinte cheie:

 promisiune nouă (funcție (rezolvare, respingere) ); 

Functia trecut ca parametru la Promisiune() constructor este cunoscut sub numele de executor testamentar. Acesta deține codul asincron și are doi parametri ai Funcţie tip, referit ca rezolva și respinge (mai multe despre acestea în scurt timp).

Statele membre ale Promisiune obiect

stare initiala a Promisiune obiect este numit in asteptarea. În această stare, rezultatul calculului asincron nu exista.

Starea inițială în așteptare se modifică îndeplinit stat atunci când calculul este de succes. rezultatul calculului este disponibil în această stare.

În cazul calculului asincron eșuează, Promisiune obiectul se deplasează la respins de la început in asteptarea stat. În această stare, motivul eșecului de calcul (adică mesaj de eroare) este pus la dispoziție.

Pentru a pleca in asteptarea la îndeplinit stat, rezolva() se numește. Pentru a pleca in asteptarea la respins stat, respinge() se numește.

atunci și captură metode

Când statul se schimbă de la in asteptarea la îndeplinit, manipulatorul evenimentului Promisiune obiecte atunci metodă este executat. Și, atunci când statul se schimbă de la in asteptarea la respins, manipulatorul evenimentului Promisiune obiecte captură metodă este executat.

Exemplul 1

“Non-Promisified” cod

Să presupunem că există hello.txt fișierul care conține “Salut” cuvânt. Iată cum putem scrie o solicitare AJAX aduceți dosarul respectiv și arată conținutul său, fără a utiliza Promisiune obiect:

 funcția getTxt () let xhr = nou XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = funcția () try comutare (this.status) caz 200: document.write (this.response); pauză; cazul 404: aruncați "Fișierul nu a fost găsit"; implicit: aruncați "Nu a reușit să preluați fișierul";  captura (err) console.log (err);  getTxt (); 

Dacă a fost conținutul fișierului preluat cu succes, adică. codul de stare a răspunsului este de 200, textul de răspuns este înscrise în document. Dacă este fișierul nu a fost găsit (starea 404), A “Fișierul nu a fost găsit” mesajul de eroare este aruncat. În caz contrar, a mesaj general de eroare indicând că eșecul preluării fișierului este aruncat.

“Promisified” cod

Acum hai să Promițiți codul de mai sus:

 funcția getTxt () returnați noua promisiune (funcția (rezolvare, respingere) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xr.onload = function () switch (this.status) caz 200: rezolva (this.response); caz 404: respinge ('File Not Found'); preluați fișierul ");;);  getTxt () și apoi (funcția (txt) document.write (txt);) captura (funcția (err) console.log (err); 

getTxt () funcția este acum codificată la returnați o nouă instanță a Promisiune obiect, iar funcția de execuție a acesteia deține codul asincron de la înainte.

Cand codul de stare a răspunsului este de 200, Promisiune este îndeplinit de apel rezolva() (răspunsul este transmis ca parametru al lui rezolva()). Când codul de stare este 404 sau altul, Promisiune este respins utilizând respinge() (cu mesajul de eroare adecvat ca parametru de respinge()).

gestionari de evenimente pentru atunci() și captură() metode din Promisiune obiect sunt adăugat la sfârșit.

Cand Promisiune este îndeplinit, distribuitorul atunci() metoda este executată. Argumentul său este parametrul trecut de la rezolva(). În interiorul handler-ului evenimentului, textul de răspuns (primit ca argument) este înscrise în document.

Cand Promisiune este respins, manipulatorul evenimentului captură() metoda este executată, înregistrarea erorii.

principalul avantaj din versiunea Promisificată de mai sus a codului este eroare de manipulare. În loc să arunce în jurul valorii de Excepții nelipsite în jurul - cum ar fi în versiunea ne-promisificată - mesaje de insuficiență corespunzătoare sunt returnate și înregistrate.

Dar, nu este vorba numai de revenind din mesaje de insuficiență dar și a rezultatul calculului asincron care poate fi cu adevărat avantajoasă pentru noi. Pentru a vedea acest lucru, va trebui să ne extindem exemplul.

Exemplul 2

“Non-Promisified” cod

În loc să afișați doar textul hello.txt, vreau sa combinați-l cu “Lume” cuvânt și afișați-l pe ecran după o perioadă de 2 secunde. Iată codul pe care îl folosesc:

 funcția getTxt () let xhr = nou XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = funcție () try comutare (this.status) caz 200: document.write (concatTxt (this.response)); pauză; cazul 404: aruncați "Fișierul nu a fost găsit"; implicit: aruncați "Nu a reușit să preluați fișierul";  captura (err) console.log (err);  funcția concatTxt (res) setTimeout (funcția () return (res + 'Lumea'), 2000);  getTxt (); 

Pe codul de stare 200, concatTxt () este chemată funcția concatenarea textului de răspuns cu “Lume” cuvânt înainte de ao scrie în document.

Dar, codul ăsta nu va funcționa așa cum doriți. setTimeout () funcția de apel invers nu poate returna șirul concatenat. Ce va fi tipărit în document este nedefinit pentru că asta e ce concatTxt () se intoarce.

“Promisified” cod

Deci, pentru a face codul să funcționeze, hai să mergem Promițiți codul de mai sus, inclusiv concatTxt ():

 funcția getTxt () returnați noua promisiune (funcția (rezolvare, respingere) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xr.onload = function () switch (this.status) caz 200: rezolva (this.response); caz 404: respinge ('File Not Found'); preluați fișierul ");;);  functie concatTxt (txt) retur noi Promise (functie (rezolvare, respingere) setTimeout (function () resolve (txt + 'Lumea');  (), apoi ((txt) => retur concatTxt (txt);, apoi ((txt) => document.write (txt); log (err);); 

Doar ca getTxt (), concatTxt () funcția de asemenea returnează un nou Promisiune obiect în loc de textul concatenat. Promisiune întors de concatTxt () este rezolvat în interiorul funcției de apel invers setTimeout ().

Aproape de sfârșitul codului de mai sus, manipulatorul evenimentului din primul atunci() metoda rulează atunci când Promisiune de getTxt () este îndeplinit, adică atunci când este fișierul preluat cu succes. În interiorul acelui manipulator, concatTxt () se numește si Promisiune întors de concatTxt () este returnat.

Operatorul de eveniment al celui de-al doilea atunci() metoda rulează atunci când Promisiune întors de concatTxt () este îndeplinit, adică intervalul de timp de două secunde sa terminat și rezolva() se numește cu șirul concatenat ca parametru al acestuia.

In cele din urma, captură() captează toate excepțiile și mesajele de eșec din ambele promisiuni.

În această versiune Promisificată, “Salut Lume” șirul va fi imprimate cu succes la document.