Inizia con le promesse di JavaScript

Codice asincrono è utile per eseguire attività che sono richiede tempo ma, naturalmente, lo è non privo di cons. Utilizza il codice asincrono funzioni di callback per elaborare i risultati, tuttavia le funzioni di callback non può restituire valori le tipiche funzioni JavaScript possono.

Quindi, non solo tolgono la nostra capacità di controllare il esecuzione della funzione ma anche fare gestione degli errori un po 'di problemi. Questo è dove il Promettere oggetto entra, in quanto mira a riempire alcuni dei buche nella codifica asincrona.

Promettere è tecnicamente un oggetto interno standard in JavaScript, nel senso che viene integrato in JavaScript. È usato per rappresentare il risultato finale di un blocco di codice asincrono (o il motivo per cui il codice non è riuscito) e ha metodi per controllare il esecuzione del codice asincrono.

Sintassi

Possiamo creare un'istanza del Promettere oggetto usando il nuovo parola chiave:

 nuova promessa (funzione (risoluzione, rifiuto) ); 

La funzione passato come parametro al Promettere() costruttore è conosciuto come il esecutore. Contiene il codice asincrono e ha due parametri del Funzione genere, denominato risolvere e rifiutare funzioni (più su questi a breve).

Stati del Promettere oggetto

Il stato iniziale di una Promettere l'oggetto è chiamato in attesa di. In questo stato, il risultato del calcolo asincrono non esiste.

Lo stato in sospeso iniziale cambia in soddisfatto stato quando il calcolo è riuscito. Il risultato del calcolo è disponibile in questo stato.

Nel caso del calcolo asincrono non riesce, il Promettere l'oggetto si sposta verso respinto stato dalla sua iniziale in attesa di stato. In questo stato, il motivo del fallimento del calcolo (cioè messaggio di errore) è reso disponibile.

Per andare da in attesa di a soddisfatto stato, risolvere() è chiamato. Per andare da in attesa di a respinto stato, rifiutare() è chiamato.

Il poi e catturare metodi

Quando lo stato cambia da in attesa di a soddisfatto, il gestore dell'evento del Promettere oggetto di poi metodo viene eseguito. E, quando lo stato cambia da in attesa di a respinto, il gestore dell'evento del Promettere oggetto di catturare metodo viene eseguito.

Esempio 1

“Non-Promisified” codice

Supponiamo che ci sia un ciao.txt file contenente il “Ciao” parola. Ecco come possiamo scrivere una richiesta AJAX prendi quel file e mostra il suo contenuto, senza usare il Promettere oggetto:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (this.response); rompere; caso 404: lanciare 'File non trovato'; default: lancia "Impossibile recuperare il file";  catch (err) console.log (err);  getTxt (); 

Se il contenuto del file è stato recuperato con successo, vale a dire. il codice di stato della risposta è 200, il testo della risposta è scritto nel documento. Se il file è non trovato (stato 404), un “File non trovato” messaggio di errore viene generato. Altrimenti, a messaggio di errore generale indicando che l'errore di recupero del file è stato generato.

“Promisified” codice

Ora facciamo Promuovi il codice sopra:

 function getTxt () return new Promise (funzione (risoluzione, rifiuto) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) caso 200: resolve (this.response); caso 404: reject ('File non trovato'); default: reject ('Failed to prendi il file ');;);  getTxt (). then (function (txt) document.write (txt);). catch (function (err) console.log (err);); 

Il getTxt () la funzione è ora codificata restituisce una nuova istanza di Promettere oggetto, e la sua funzione esecutore contiene il codice asincrono di prima.

Quando il il codice di stato della risposta è 200, il Promettere è soddisfatto di chiamata risolvere() (la risposta è passata come parametro di risolvere()). Quando il codice di stato è 404 o un altro, il Promettere è respinto utilizzando rifiutare() (con il messaggio di errore appropriato come parametro di rifiutare()).

Il gestori di eventi per il poi() e catturare() metodi del Promettere oggetto sono aggiunto alla fine.

Quando il Promettere è soddisfatto, il conduttore di poi() il metodo è eseguito. La sua argomentazione è il parametro è passato da risolvere(). All'interno del gestore di eventi, il testo di risposta (ricevuto come argomento) è scritto nel documento.

Quando il Promettere è respinto, il gestore dell'evento del catturare() il metodo è eseguito, registrando l'errore.

Il vantaggio principale di cui sopra la versione promessa del codice è il gestione degli errori. Invece di lanciare le eccezioni Uncaught in giro - come nella versione non promessa - il messaggi di errore appropriati vengono restituiti e registrati.

Ma non è solo il ritorno del messaggi di errore ma anche del risultato del calcolo asincrono questo può essere veramente vantaggioso per noi. Per vederlo, dovremo espandere il nostro esempio.

Esempio 2

“Non-Promisified” codice

Invece di mostrare solo il testo da ciao.txt, voglio combinalo con il “Mondo” parola e visualizzarlo sullo schermo dopo un timeout di 2 secondi. Ecco il codice che uso:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (concatTxt (this.response)); rompere; caso 404: lanciare 'File non trovato'; default: lancia "Impossibile recuperare il file";  catch (err) console.log (err);  function concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

Sul codice di stato 200, il concatTxt () la funzione è chiamata a concatenare il testo della risposta con il “Mondo” parola prima di scriverlo nel documento.

Ma questo codice non funzionerà come desiderato. Il setTimeout () funzione di callback impossibile restituire la stringa concatenata. Quello che verrà stampato sul documento è non definito perché quello è che cosa concatTxt () ritorna.

“Promisified” codice

Quindi, per far funzionare il codice, facciamo Promuovi il codice sopra, Compreso concatTxt ():

 function getTxt () return new Promise (funzione (risoluzione, rifiuto) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) caso 200: resolve (this.response); caso 404: reject ('File non trovato'); default: reject ('Failed to prendi il file ');;);  function concatTxt (txt) return new Promise (function (resolve, reject) setTimeout (function () resolve (txt + 'World');, 2000););  getTxt (). then ((txt) => return concatTxt (txt);). then ((txt) => document.write (txt);). catch ((err) => console. log (err);); 

Proprio come getTxt (), il concatTxt () funzione anche restituisce un nuovo Promettere oggetto invece del testo concatenato. Il Promettere restituito da concatTxt () è risolto all'interno della funzione di callback di setTimeout ().

Vicino alla fine del codice precedente, il gestore di eventi del primo poi() il metodo viene eseguito quando Promettere di getTxt () è soddisfatto, cioè quando il file è recuperato con successo. Dentro quel conduttore, concatTxt () è chiamato e il Promettere restituito da concatTxt () viene restituito.

Il gestore dell'evento del secondo poi() il metodo viene eseguito quando Promettere restituito da concatTxt () è soddisfatto, cioè il il timeout di due secondi è scaduto e risolvere() è chiamato con la stringa concatenata come parametro.

Finalmente, catturare() cattura tutte le eccezioni e i messaggi di errore da entrambe le promesse.

In questa versione promessa, il “Ciao mondo” la stringa sarà stampato con successo al documento.