Con l’abbondanza di Promesse, Osservabilie setTimeout nelle moderne applicazioni JavaScript, è fondamentale che gli sviluppatori comprendano come lavorare con i processi asincroni. Asincrono le chiamate condividono tutte una cosa in comune, ovvero che richiedono l’attesa del completamento di un metodo prima di continuare. In questo articolo, gli sviluppatori web impareranno come ES6 semplifica la programmazione asincrona asincrono, aspettaree Promises.all().

Usando asincrono in ES6

Aggiungendo il asincrono la parola chiave prima di una dichiarazione di funzione la trasforma in un funzione asincrona. Una funzione asincrona è una funzione che sa aspettarsi la possibilità del aspettare parola chiave utilizzata per richiamare codice asincrono.

Se dovessimo digitare le seguenti righe nella console JavaScript del browser, stamperebbe immediatamente “Ciao“:

const hello = () => "Hello";
hello();

Possiamo trasformare il metodo sopra in uno asincrono aggiungendo il asincrono parola chiave:

const hello = async () => "Hello";
hello();

Invocare la funzione ora restituisce a promettere. In effetti, uno dei tratti chiave delle funzioni asincrone è che è garantito che i loro valori restituiti vengano convertiti in promesse. Ora possiamo consumare il valore restituito quando la promessa viene soddisfatta utilizzando a .poi() bloccare:

hello().then((value) => console.log(value));

//or even just shorthand such as:
hello().then(console.log);

Possiamo usare il asincrono parola chiave con qualsiasi metodo che restituisca una promessa o osservabile, come nel caso di HttpClient ottenere() metodo. Ecco un metodo che verifica se un collegamento è valido recuperandolo e verificando la presenza di un errore 401 (non trovato):

private async isValidLink(link: string): Promise<boolean> {
  return this.http.get(link, { responseType: 'text'})
    .pipe(
      map((res) => true),
      catchError(err => of(false))
    ).toPromise();
}

public goTo(page: string) {
  this.isValidLink(page).then(isValid => {
    if (isValid) {
      window.location.href = page;
    } 
  });
}

Leggere: Programmazione asincrona in JavaScript

Il aspettare Parola chiave

Il vantaggio di un asincrono la funzione diventa evidente quando la si combina con il aspettare parola chiave. Viene messo davanti a qualsiasi funzione asincrona basata sulla promessa per mettere in pausa il codice su quella riga fino a quando la promessa non viene soddisfatta, quindi restituisce il valore risultante. Possiamo usare aspettare quando si richiama una funzione che restituisce una promessa, comprese le funzioni dell’API Web.

Ecco un banale esempio:

const hello = () => await Promise.resolve("Hello");
hello().then(console.log);

Avremmo potuto scrivere il vai a() metodo come segue per attendere una risposta da èValidLink():

public goTo(page: string) {
  const isValid = await this.isValidLink(page);
  if (isValid) window.location.href = page;
}

Usare le promesse all’interno di un ciclo

L’esecuzione di metodi asincroni all’interno di un ciclo può aggravare rapidamente i problemi di temporizzazione. Pertanto, è fondamentale gestirli correttamente. Oltre alle tecniche menzionate in precedenza, puoi anche utilizzare la statica Promise.all() metodo per l’elaborazione iterativa. Accetta un iterabile di promesse come parametro di input e restituisce una singola promessa che si risolve in una matrice dei risultati delle promesse di input fornite. Rifiuta immediatamente quando una qualsiasi delle promesse di input rifiuta o genera un errore e rifiuterà con questo primo messaggio/errore di rifiuto. Ecco la procedura generale per l’utilizzo Promise.all():

const promises = [];

for (let i = 0; i < collectionSize; i++) {
  promises.push(doSomeAsyncStuff());
}

Promise.all(promises)
  .then(() => {
    for (let i = 0; i < collectionSize; i++) {
        doSomethingOnlyWhenTheAsyncStuffIsDone();    
    }
  })
  .catch((e) => {
    // handle errors here
  });

Ora, diamo un’occhiata a un metodo asincrono che convalida un array di collegamenti e li mappa su un array di valori booleani che contengono i risultati di tutti i èValidLink() invocazioni:

public async hideTheBadLinks() {
  Promise.all(this.links.map(link => this.isValidLink(link))) 
    .then(results => this.links = links.filter((_, i) => results[i]));
}

Una volta che tutte le promesse sono state risolte, Promise.all() esegue il metodo di callback tramite poi(). Lì, i collegamenti non validi vengono rimossi dal collegamenti Vettore.

Leggere: Il ciclo FOR JavaScript

Il gioco di collegamento della roulette russa

Per mostrare tutti i concetti di cui sopra in azione, ti indirizzerei al Gioco di collegamento della roulette russa. Questa versione considerevolmente più sicura del gioco utilizza i collegamenti anziché i proiettili e divide casualmente sei scelte tra collegamenti errati e collegamenti validi. Per evitare la navigazione a 404 pagine, l’app recupera la pagina utilizzando HttpClient’s ottenere() metodo e converte l’elemento di collegamento in un messaggio di “collegamento errato”:

Il Nascondi i collegamenti difettosi il pulsante rimuove i collegamenti non validi eseguendo tutti i collegamenti in successione e quindi sostituendoli con l’elenco più piccolo di collegamenti validi:

Il codice sorgente dell’app contiene alcune altre chicche, come la randomizzazione dei collegamenti utilizzando l’algoritmo di Durstenfeld shuffle, la sostituzione degli elementi della pagina utilizzando l’oggetto Angular Renderer2 e altri trucchi accurati!

Conclusione sulla programmazione asincrona in ES6

Promesse, abbonamento a Observables e setTimeout() tutte le chiamate richiedono l’attesa del completamento di un metodo prima di continuare. ES6 semplifica la programmazione asincrona con il asincrono e aspettare parole chiave. Finalmente, Promises.all() fornisce un mezzo per raggruppare diversi metodi asincroni in una matrice di risultati su cui possiamo quindi scorrere per un’elaborazione aggiuntiva.

Per saperne di più Tutorial per lo sviluppo web di ES6 e JavaScript.