asynchrone / attendre-js tutoriel-php.cn

asynchrone / attendre

Barbara Streisand

Libérer： 2024-10-10 06:24:30

original

889 Les gens l'ont consulté

async / await

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'));

Copier après la connexion

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();

Copier après la connexion

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();

Copier après la connexion

La sortie sera

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

Copier après la connexion

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!