asynchrone / attendre

async / wait est une façon plus récente d'écrire du code asynchrone par rapport aux promesses. Les principaux avantages de async/await sont une lisibilité améliorée et l'évitement du chaînage de promesses. Les promesses peuvent devenir longues, difficiles à lire et contenir des rappels profondément imbriqués qui peuvent être difficiles à déboguer.

Exemple

Rappelez-vous notre récupération d'avant.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error))
  .finally(() => console.log('All done'));

En utilisant async/await, le code peut être refactorisé pour ressembler à ceci :

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  } finally {
    console.log('All done');
  }
}

fetchData();

Bien qu'il puisse s'agir de quelques lignes de code supplémentaires, cette version est plus facile à lire car elle ressemble à une fonction synchrone normale. De plus, si les fonctions contenues dans les instructions .then() étaient plus complexes, la lisibilité et la capacité de débogage seraient encore plus affectées. L'exemple async/await est beaucoup plus clair.

Exemple 2 : Commander de la nourriture dans un restaurant

Structure de async/wait

Une fonction async/await comporte deux parties essentielles : async et wait. Le mot-clé async est ajouté avant une déclaration de fonction et wait est utilisé lorsqu'une tâche asynchrone commence.

Illustrons cela avec un exemple de commande de nourriture dans un restaurant :

// Simulate the order process with async/await
async function foodOrder() {
  console.log("Ordering food...");
  await new Promise(resolve => setTimeout(resolve, 2000)); // Wait 2 seconds for food to be prepared
  return "Your food is ready!";
}

// Simulate the eating process
function eatFood(order) {
  console.log(order); // This logs "Your food is ready!"
  console.log("Enjoying the meal!");
}

// Simulate continuing the conversation
function continueConversation() {
  console.log("While waiting, you continue chatting with friends...");
}

async function orderFood() {
  console.log("You've arrived at the restaurant.");
  const order = await foodOrder(); // Place the order and wait for it to be ready
  continueConversation(); // Chat while waiting
  eatFood(order); // Eat the food once it arrives
}

orderFood();

Le résultat sera

You've arrived at the restaurant.
Ordering food...
While waiting, you continue chatting with friends...
Your food is ready!
Enjoying the meal!