Inizia con le promesse di JavaScript

Il codice asincrono è utile per eseguire attività che richiedono molto tempo ma, ovviamente, non sono prive di cons . Il codice asincrono usa le funzioni di callback per elaborare i suoi risultati, tuttavia le funzioni di callback non possono restituire i valori tipici delle tipiche funzioni JavaScript.

Pertanto, non solo rimuovono la nostra capacità di controllare l' esecuzione della funzione, ma rendono anche la gestione degli errori un po 'complicata. È qui che entra in gioco l' oggetto Promise, poiché mira a riempire alcune buche nella codifica asincrona .

Promise è tecnicamente un oggetto interno standard in JavaScript, il che significa che è incorporato in JavaScript . Viene utilizzato 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 l' esecuzione del codice asincrono .

Sintassi

Possiamo creare un'istanza dell'oggetto Promise usando la new parola chiave:

 nuova promessa (funzione (risoluzione, rifiuto) {}); 

La funzione passata come parametro al costruttore Promise() è nota come esecutore . Contiene il codice asincrono e ha due parametri del tipo di Function, definiti funzioni di resolve e reject (di più su questi a breve).

Stati dell'oggetto Promise

Lo stato iniziale di un oggetto Promise è chiamato in sospeso . In questo stato, il risultato del calcolo asincrono non esiste .

Lo stato in sospeso iniziale passa allo stato soddisfatto quando il calcolo ha esito positivo . Il risultato del calcolo è disponibile in questo stato.

Nel caso in cui il calcolo asincrono fallisca, l'oggetto Promise sposta allo stato rifiutato dal suo stato di attesa in sospeso . In questo stato, viene resa disponibile la ragione dell'errore di calcolo (es. Messaggio di errore).

Per passare dallo stato in sospeso allo stato soddisfatto, viene chiamato resolve() . Per passare dallo stato in sospeso a quello rifiutato, viene chiamato reject() .

Quando lo stato passa da sospeso a soddisfatto, viene eseguito il gestore di eventi del metodo then dell'oggetto Promise . E, quando lo stato cambia da sospeso a rifiutato, viene eseguito il gestore di eventi del metodo di catch dell'oggetto Promise .

Esempio 1

Codice "non promesso"

Supponiamo che ci sia un file hello.txt contenente la parola "Ciao". Ecco come possiamo scrivere una richiesta AJAX per recuperare quel file e mostrarne il contenuto, senza utilizzare l'oggetto Promise :

 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: lancia "File non trovato"; default: lancia "Impossibile recuperare il file"; }} catch (err) {console.log (err)}}; } getTxt (); 

Se il contenuto del file è stato recuperato con successo, ovvero il codice di stato della risposta è 200, il testo della risposta viene scritto nel documento . Se il file non viene trovato (stato 404), viene generato un messaggio di errore "File non trovato". In caso contrario, viene generato un messaggio di errore generale che indica il fallimento del recupero del file.

Codice "promesso"

Ora, promuoviamo il codice sopra riportato :

 function getTxt () {return new Promise (function (resolve, reject) {let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {switch (this.status) {case 200: resolve (this.response); case 404: reject ('File Not Found'); default: reject ('Non riuscito a prendi il file ');}};}); } getTxt (). then (function (txt) {document.write (txt);}). catch (function (err) {console.log (err);}); 

La funzione getTxt() è ora codificata per restituire una nuova istanza dell'oggetto Promise e la sua funzione executor contiene il codice asincrono di prima.

Quando il codice di stato della risposta è 200, la Promise è soddisfatta chiamando resolve() (la risposta è passata come parametro di resolve() ). Quando il codice di stato è 404 o un altro, la Promise viene rifiutata usando reject() (con il messaggio di errore appropriato come parametro di reject() ).

I gestori di eventi per i metodi then() e catch() dell'oggetto Promise vengono aggiunti alla fine .

Quando la Promise è soddisfatta, viene eseguito il gestore del metodo then() . Il suo argomento è il parametro passato da resolve() . All'interno del gestore di eventi, il testo di risposta (ricevuto come argomento) viene scritto nel documento .

Quando la Promise viene rifiutata, viene eseguito il gestore di eventi del metodo catch(), registrando l'errore .

Il vantaggio principale della versione Promisified del codice sopra è la gestione degli errori . Invece di lanciare le eccezioni Uncaught in giro - come nella versione Non-Promisified - i messaggi di errore appropriati vengono restituiti e registrati.

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

Esempio 2

Codice "non promesso"

Invece di visualizzare semplicemente il testo da hello.txt, voglio combinarlo con la parola "Mondo" 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: lancia "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, la funzione concatTxt() viene chiamata per concatenare il testo di risposta con la parola "Mondo" prima di scriverlo nel documento.

Ma questo codice non funzionerà come desiderato . La funzione di callback setTimeout() non può restituire la stringa concatenata . Ciò che verrà stampato sul documento undefined è undefined perché è ciò che concatTxt() .

Codice "promesso"

Quindi, per far funzionare il codice, promuoviamo il codice precedente, incluso concatTxt() :

 function getTxt () {return new Promise (function (resolve, reject) {let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {switch (this.status) {case 200: resolve (this.response); case 404: reject ('File Not Found'); default: reject ('Non riuscito a 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(), la funzione concatTxt() restituisce anche un nuovo oggetto Promise invece del testo concatenato. La Promise restituita da concatTxt() viene risolta all'interno della funzione di callback di setTimeout() .

Verso la fine del codice precedente, il gestore di eventi del primo metodo then() viene eseguito quando viene soddisfatta la Promise di getTxt(), ovvero quando il file viene recuperato correttamente . All'interno di quel gestore, viene chiamato concatTxt() viene restituita la Promise restituita da concatTxt() .

Il gestore di eventi del secondo metodo then() viene eseguito quando viene soddisfatta la Promise restituita da concatTxt(), ovvero il timeout di due secondi è terminato e resolve() viene chiamato con la stringa concatenata come parametro.

Infine, catch() cattura tutte le eccezioni e i messaggi di errore da entrambe le Promesse.

In questa versione promessa, la stringa "Hello World" verrà stampata correttamente nel documento.

Etichetta di Photoshop: una guida al flusso di lavoro PS per i progettisti

Adobe Photoshop è un potente programma che può fare editing di foto, progettazione dell'interfaccia utente, pittura digitale e persino lavoro vettoriale . Ci vogliono anni per padroneggiare tutte le scorciatoie da tastiera e i flussi di lavoro perché c'è così tanto da imparare.Photoshop Etiquette è una guida online gratuita che può aiutarti a trovare un flusso di lavoro produttivo .Questa

(Consigli tecnici e di design)

Concetti di sviluppo Web che tutti i web designer dovrebbero comprendere

C'è molto da dire sul divario tra designer e sviluppatori . Certo, ci sono molti ibridi designer / sviluppatori in grado di capire entrambi i lati della medaglia, ma sono pochi e distanti tra loro.I progetti creativi prosperano su una corretta comunicazione . Tuttavia questo può essere difficile quando i progettisti e gli sviluppatori non sono sicuri su come parlare l'uno con l'altro .

(Consigli tecnici e di design)