Comment fonctionne le Async / Await en javascript ?

Si vous désirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter

Synchrone vs Asynchrone

Le code synchrone est exécuté ligne par ligne. Chaque ligne de code attend toujours la fin de la ligne précédente avant d'exécuter la suivante. Alors évidemment, le problème est qu'une opération longue durée bloquera l'exécution du code.

Le code asynchrone quant à lui n'est pas bloquant, alors il n'attend pas la fin d'une autre tâche.

Un exemple d'asynchrone en javascript est la fonction fetch() Fetch) permet d'obtenir des données (généralement en format JSON) à un serveur web de manière dynamique (sans bloqué l'exécution du code et sans recharger la page)

Une fonction asynchrone moderne comme fetch() renvoie une promesse. aka, un conteneur/espace réservé pour un résultat futur. Le futur résultat/valeur est la réponse de l'appel fetch.

// Exemple d'une fonction fetch() renvoyant une promesse
const request = fetch('http://example.com/api/cats')

// Retourne une promesse
console.log(request) // Promise {<pending>}

Une promesse est en attente jusqu'à ce qu'elle soit réglée (terminé). Il peut avoir deux statuts réglés : accompli (succès) ou rejeté (erreur).

// Exemple d'une fonction fetch() renvoyant une promesse
const getCatsImage = function() {
  // La fonction fetch() renvoie une promesse
  // Lorsque la promesse est remplie, la fonction s'exécute
  // Le résultat est contenu dans le paramètre data
  const request = fetch('http://example.com/api/cats')
    .then(response => return response.json())
    .then(data => loadCatImage(data[0]))
  })
}

Gestion des erreurs

const getCatsImage = function() {
  // La fonction fetch() renvoie une promesse
  // Lorsque la promesse est remplie, la fonction s'exécute
  // Le résultat est contenu dans le paramètre data
  // Si y il a erreur la fonction catch() va s'éxécuter
  // La fonction finally() s'éxécute dans tous les cas
  const request = fetch('http://example.com/api/cats')
    .then(response => return response.json())
    .then(data => loadCatImage(data[0]))
    .catch(err => console.log(err))
    .finally(() => console.log('Run after both')
  })
}

Créer une promesse

const wait = function(sec) {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      resolve('wait over')
    }, sec * 1000)
  })
}

wait(3).then((msg) => console.log(msg)) // wait over

Async / Await
La fonction async et le mot-clé await ont été introduits comme une extension des promesses. Ils ont été introduits pour rendre la programmation asynchrone basée sur des promesses plus lisible. Async/await simplifie simplement la syntaxe utilisée pour consommer une promesse.

// Async exécute la fonction en mode asynchrone
// et retourne une promesse
const delay = async function(sec) {
  // Await met en pause le bloc de fonction asynchrone du code
  // jusqu'à ce que la promesse retourne un résultat
  const response = await new Promise(function(resolve, reject) {
     setTimeout(() => {
      resolve('wait over')
    }, sec * 1000)
  })
  console.log(response)
}

delay(3)

Catch error in async/await

const delay = async function(sec) {
  try {
    const response = await new Promise(function(resolve, reject) {
      setTimeout(() => {
        resolve('wait over')
      }, sec * 1000)
    })
    console.log(response)
  } catch(err) {
    console.log(err.message)
    // You can also throw error up to calling parent
    throw err
  }
}
delay(3)

Le mot-clé await ne peut être utilisé que dans une fonction Async. Donc, pour utiliser await dans le module principal, vous devez créer un IIFE (fonction immédiatement invoquée)

(async function() {
  const cats = await getCats()
  console.log('start')
  console.log(cats)
  console.log('end')
})()

Même concept mais avec l'opérateur then()

console.log('start')
getCats().then(cats => {
    console.log(cats)
    console.log('end')
}

Exécuter des promesses en parallèle

(async function() {
  // const cats = await getCats()
  // const dogs = await getDogs()
  // utiliser Promise.all pour exécution en parallèle
  const data = await Promise.all([getCats(), getDogs()])
  console.log('start')
  // Promise.All returne un tableau
  console.log(data[0]) //cats
  console.log(data[1]) //dogs
  console.log('end')
})()