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.

5 AngularJS Frameworks per far partire rapidamente le app

Ora che sei esperto di basi, è ora di iniziare a creare la tua applicazione web con AngularJS . AngularJS ha reso la creazione di un'app basata su Javascript più intuitiva utilizzando le cosiddette direttive, che funzionano mano nella mano con i tuoi markup HTML.Se costruire un'applicazione web da terra ti sembra travolgente, non preoccuparti.

(Consigli tecnici e di design)

Progettare un processo di onboarding che aiuti effettivamente gli utenti a imparare

Saltare in una nuova app di solito arriva con la difficoltà di imparare come funziona. Potresti farcela velocemente, ma c'è sempre un processo di apprendimento . L'obiettivo dell'onboarding è quello di introdurre nuovi utenti in un sito Web, un programma o un'applicazione. Con l'onboarding, dovresti insegnare le singole funzionalità, come funzionano e in che modo l'app offre valore all'utente.In

(Consigli tecnici e di design)