K

Utilisation avancée de javascript

Programmation asynchrone

Dans ce chapitre, nous allons explorer l'utilisation avancée de JavaScript pour la programmation asynchrone. Nous verrons comment utiliser les promesses et les fonctions asynchrones pour gérer les opérations asynchrones telles que les requêtes réseau et les timers. Nous verrons également comment utiliser les opérateurs de résolution de promesses pour gérer les erreurs et les résultats de ces opérations.

Les promesses Les promesses sont un mécanisme JavaScript pour gérer les opérations asynchrones. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur ou jamais. Les promesses ont deux états possibles : résolues ou rejetées. Une fois qu'une promesse est résolue, elle ne peut pas être rejetée et vice versa.

Voici un exemple d'utilisation des promesses pour gérer un appel réseau :

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((data) => {
    console.log(data)
  })
  .catch((error) => {
    console.log(error)
  })

Les fonctions asynchrones Les fonctions asynchrones sont des fonctions JavaScript qui utilisent les promesses pour gérer les opérations asynchrones. Une fonction asynchrone retourne une promesse qui est résolue ou rejetée en fonction de son résultat.

Voici un exemple d'utilisation de fonction asynchrone pour gérer un délai :

async function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

async function main() {
  console.log('Starting...')
  await delay(2000)
  console.log('Ending...')
}

main()

Les opérateurs de résolution de promesses Il existe des opérateurs de résolution de promesses tels que Promise.all() et Promise.race() qui permettent de gérer plusieurs promesses simultanément.

Promise.all() prend en entrée un tableau de promesses et retourne une nouvelle promesse qui est résolue si toutes les promesses du tableau sont résolues et rejetée si l'une d'entre elles est rejetée.

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results)
  })
  .catch((error) => {
    console.log(error)
  })

<!-- Promise.race() prend en entrée un tableau de -->

Précédent
Utilisation de bibliothèques pour des tâches spécifiques (Ajax, animations, etc.)