knowledgebase/journals/2023_07_13.md

• Operazioni asincrone in #Javascript e #TypeScript

  • Spiegami in maniera concisa e con degli esempi l'utilizzo di async await in Typescript o Javascript. Async e Await sono due parole chiave in Javascript e Typescript che permettono di gestire operazioni asincrone in maniera più semplice e leggibile.

    Quando una funzione è marcata come async, significa che essa restituirà una Promise. All'interno di una funzione async, si può utilizzare la parola chiave await per aspettare che una Promise sia risolta (o rifiutata).

    Ecco un esempio di come si può utilizzare:

    async function fetchUserDetails(userId: string) {
        const response = await fetch(`https://api.example.com/user/${userId}`);
        const userDetails = await response.json();
        return userDetails;
    }
    

    In questo esempio, la funzione fetchUserDetails è marcata come async, quindi restituirà una Promise. All'interno della funzione, prima viene eseguita la chiamata al servizio web con fetch, e poi si utilizza await per aspettare che la chiamata sia completata. Una volta che la chiamata è completata, il risultato viene convertito in JSON con response.json(), di nuovo utilizzando await per aspettare che l'operazione sia completata.

    L'uso di async e await rende il codice molto più leggibile rispetto all'uso di callback o di catene di Promise, in particolare quando si hanno operazioni asincrone multiple che devono essere eseguite in sequenza. Inoltre, permette di utilizzare la normale sintassi di try/catch per gestire gli errori asincroni.

    A cosa serve la parola chiave then? La parola chiave then viene utilizzata in JavaScript e TypeScript per gestire le operazioni asincrone con le Promise.

    Quando si esegue un'operazione asincrona che restituisce una Promise, si può utilizzare then per specificare cosa fare quando la Promise è risolta. Il metodo then accetta una funzione callback che verrà eseguita quando la Promise è risolta.

    Ecco un esempio:

    fetch('https://api.example.com/user/123')
      .then(response => response.json())
      .then(userDetails => console.log(userDetails));
    

    In questo esempio, la chiamata a fetch restituisce una Promise. Quando la Promise è risolta (cioè quando la risposta del server è disponibile), la funzione callback passata al primo then viene eseguita. Questa funzione converte la risposta in JSON, e restituisce una nuova Promise. Quando questa Promise è risolta, la funzione callback passata al secondo then viene eseguita, stampando i dettagli dell'utente sulla console.

    In pratica, then permette di creare una catena di operazioni asincrone, dove ciascuna operazione inizia quando la precedente è completata.

    Che relazione c'è quindi tra await, async e then? Async, await e then sono tutti strumenti che ci permettono di gestire le operazioni asincrone in JavaScript e TypeScript.

  • async è una parola chiave che si utilizza per dichiarare una funzione asincrona, che restituirà una Promise.

  • await è una parola chiave che si utilizza all'interno di una funzione async per aspettare che una Promise sia risolta.

  • then è un metodo delle Promise che permette di specificare una funzione callback da eseguire quando la Promise è risolta.

    In pratica, async e await offrono un modo più leggibile e intuitivo per gestire le operazioni asincrone rispetto a then. Con async e await, è possibile scrivere codice asincrono che sembra sincrono, rendendo il codice più facile da capire e da gestire.

    Ecco un esempio che mostra come si possono utilizzare insieme:

    async function fetchUserDetails(userId: string) {
      const response = await fetch(`https://api.example.com/user/${userId}`);
      const userDetails = await response.json();
      return userDetails;
    }
    
    fetchUserDetails('123')
    .then(userDetails => console.log(userDetails))
    .catch(error => console.error(error));
    

    In questo esempio, la funzione fetchUserDetails è una funzione async che utilizza await per aspettare il completamento delle operazioni asincrone. Quando la funzione viene chiamata, restituisce una Promise. Quindi, si può utilizzare then per specificare cosa fare quando la Promise è risolta, e catch per gestire eventuali errori.

    Come si gestiscono gestiscono gli errori quando si sceglie di utilizzare il costrutto await?

    Quando si utilizza il costrutto await, gli errori possono essere gestiti utilizzando il blocco try/catch, proprio come si farebbe con il codice sincrono. Quando una Promise viene rifiutata, l'operazione await lancia un'eccezione, che può essere catturata con catch.

    Ecco un esempio:

    async function fetchUserDetails(userId: string) {
      try {
          const response = await fetch(`https://api.example.com/user/${userId}`);
          const userDetails = await response.json();
          return userDetails;
      } catch (error) {
          console.error('An error occurred:', error);
          throw error;  // Rilancia l'errore così può essere catturato più in alto nella catena di chiamate
      }
    }
    

    In questo esempio, se la chiamata a fetch fallisce, o se la conversione della risposta in JSON fallisce, l'errore viene catturato nel blocco catch. L'errore viene quindi stampato sulla console, e rilanciato così può essere gestito più in alto nella catena di chiamate.

    Questo tipo di gestione degli errori rende il codice molto più leggibile e facile da gestire rispetto all'utilizzo di then e catch con le Promise, specialmente quando si hanno molte operazioni asincrone che devono essere eseguite in sequenza.

• Alla persona di cui ho sempre ammirato la saggezza e il coraggio, che mi ha dato la possibilità di imparare ogni giorno qualcosa di nuovo, di esprimere al meglio le mie potenzialità e ha reso possibili esaltanti e appassionanti scambi intellettuali su sfide all'apparenza impossibili. Goditi al massimo tutti i nuovi viaggi che verranno! #regali
• 06:04 quick capture: PCSX2 is an open source PS2 Emulator #emulator #retrogaming
• 07:53 quick capture: Xenia: Xbox 360 Emulator #emulator #retrogaming
• 16:41 quick capture: GitHub - trehn/termdown: Countdown timer and stopwatch in your terminal #linuxcommandline #tui
• 19:16 quick capture: https://cyber.dabamos.de/unix/x11/ #linux
• 19:18 quick capture: GitHub - trehn/termdown: Countdown timer and stopwatch in your terminal