Comprendre la nouvelle syntaxe d'Async/Await en JavaScript

Inspirée par le billet de blog de l'équipe Zeit, notre équipe PayPal a récemment migré la base de données côté serveur vers Async/Await. Je souhaite partager mon expérience avec vous.

Tout d'abord, comprenons deux termes :

• Fonction asynchrone
• Mot clé d'attente

Vous parlez toujours d'Async et d'Await ensemble, mais ce que vous devez savoir, c'est que ce sont deux choses différentes. Ce que vous devez comprendre à propos de la fonction Async et du mot-clé Await, c'est qu'ils sont certainement liés dans une certaine mesure, mais la fonction Async peut toujours être utilisée sans Await.

Recommandations d'apprentissage associées : Tutoriel vidéo javascript

La fonction renverra une promesse

Lorsque vous créez une fonction à l'aide du mot-clé async, la fonction renverra toujours une promesse. Lorsque vous revenez dans une fonction asynchrone, elle enveloppe votre valeur avec une promesse.

 // here is an async function
 async function getNumber() {

  return 4 // actually returns a Promise
  }
  // the same function using promises
  function getNumber() {

     return Promise.resolve(4)

}

Fonction asynchrone et son équivalent basé sur la promesse

En plus de convertir votre retour en promesse, les fonctions asynchrones ont une particularité c'est que c'est le seul endroit où vous utilisez le mot-clé wait.

Await permet de suspendre l'exécution d'une fonction asynchrone jusqu'à ce qu'elle reçoive le résultat d'une promesse. Cela vous permet d'écrire du code asynchrone qui apparaît dans l'ordre d'exécution.

 // async function to show user data
 async function displayUserData() {

    let me = await fetch('/users/me')

    console.log(me)

}// promise-based equivalent
function displayUserData() {

    return fetch('/users/me').then(function(me) {

        console.log(me)

    })

})

Await vous permet d'écrire du code asynchrone sans avoir besoin de rappels. L’avantage est que cela rend votre code plus lisible. Et wait est compatible avec n'importe quelle promesse, pas seulement avec les promesses créées avec des fonctions asynchrones.

Gestion des erreurs dans les fonctions asynchrones

Parce que la fonction asynchrone est également une promesse, lorsque vous mettez une fonction asynchrone dans le code, elle sera être absorbé et restitué comme une promesse rejetée.

 // basic error handling with async functions
 async function getData(param) {

   if (isBad(param)) {     
    throw new Error("this is a bad param")

   }   
   // ...
   }
   // basic promise-based error handling example
   function getData(param) {

   if (isBad(param)) {      
   return Promise.reject(new Error("this is a bad param"))

   }  
    // ...
    }

Lorsque vous utilisez wait pour appeler Promise, vous pouvez l'envelopper avec try/catch, ou vous devez ajouter un gestionnaire catch à la promesse renvoyée.

 // rely on try/catch around the awaited Promise

async function doSomething() {   
 try {       
  let data = await getData()

    } catch (err) {       
     console.error(err)

    }

}
// add a catch handlerfunction doSomething() {    
return getData().catch(err => {      
  console.error(err)

    })

}

Intégration

L'utilisation des propriétés de gestion des erreurs de promise et de la syntaxe concise des fonctions asynchrones peut vous apporter des fonctionnalités puissantes.

Dans l'exemple simple ci-dessous, vous verrez comment j'ai tiré parti des capacités de gestion des erreurs inhérentes aux fonctions asynchrones, ce qui m'a permis de simplifier le processus de gestion des erreurs dans mon application Express.

 // catch any errors in the promise and either forward them to next(err) or ignore them
 const catchErrors = fn => (req, res, next) => fn(req, res, next).catch(next)
 const ignoreErrors = fn => (req, res, next) => fn(req, res, next).catch(() => next())
 // wrap my routes in those helpers functions to get error handling
 app.get('/sendMoney/:amount', catchErrors(sendMoney))
 // use our ignoreErrors helper to ignore any errors in the logging middleware
 app.get('/doSomethingElse', ignoreErrors(logSomething), doSomethingElse)
 // controller method can throw errors knowing router will pick it up
 export async function sendMoney(req, res, next) {  
 if (!req.param.amount) {     
 throw new Error('You need to provide an amount!')  

  }  await Money.sendPayment(amount) // no try/catch needed

  res.send(`You just sent ${amount}`)}

// basic async logging middleware
export async function logSomething(req, res, next) {

    // ...    
    throw new Error('Something went wrong with your logging')

    // ...

}

Auparavant, nous utilisions next(err) pour gérer les erreurs. Cependant, avec async/await, nous pouvons placer des erreurs n'importe où dans le code, puis le routeur transmettra ces erreurs à la fonction suivante fournie par Express, ce qui simplifie grandement le processus de gestion des erreurs.

J'ai passé plusieurs heures à migrer la base de données. Pour utiliser cette méthode, la seule chose dont vous avez besoin est une compréhension approfondie de Promise et apprendre à configurer Babel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!