async et promesses expliquées en JS

remarque : tous les concepts sont liés, donc pour savoir une chose, vous devez également comprendre d'autres concepts

code de blocage

Supposons que vous ayez une boucle dans votre programme qui prend des années. Vous avez maintenant deux options : passer à autre chose ou attendre. Si vous choisissez d’attendre, cela sera considéré comme un code bloquant. Sinon, vous n'avez pas le choix ?. voyons voir.

//blocking code
let sum = 0;
for(let i = 1;i<Number.MAX_SAFE_INTEGER;i++){
  for(let j = 1;j<Number.MAX_SAFE_INTEGER;j++){
      sum = i+j;
}
}
console.log(sum);
// above program is dummy and does not serve any purpose

Maintenant, comme vous pouvez le voir, nous ne laisserons pas exécuter les programmes qui se trouvent en dessous avant la fin. Maintenant, pour fonctionner, nous devons attendre des années et l'utilisateur pourrait manquer certaines choses importantes (autres fonctionnalités).

Pour contourner de telles situations, nous pouvons mettre for et console.log(sum) dans un fichier qui peut s'exécuter parallèlement à notre code et attendre que nous lui donnions un signal vert. C'est ce qu'on appelle l'asynchrone. Le code asynchrone s'exécute parallèlement au code principal et ne s'exécute qu'une fois le code principal terminé.

Si le code asynchrone contient un autre code asynchrone. Il ne fonctionnera pas avant la fin extérieure.

problème de devoirs

quel sera le résultat du programme ci-dessous ?

• setInterval est une fonction JS intégrée pour exécuter un programme par intervalles.

// will inner ever run ? if yes then why (ask gemini/gpt)
setInterval(()=>{
  console.log("outer");
  setInterval(()=>{
    console.log("inner");
  },1000)
},1000)

code non bloquant

setTimeout(()=>{
   console.log("outer");
   setTimeout(()=>{
     console.log("inner");
     for(let i = 1;i<1000;i++){}
     console.log("inner finished");
   },0)
   console.log("outer finishes");
},0)
console.log("i will run first");

sortie

i will run first
outer
outer finishes
inner
inner finished

Remarque : à partir du code ci-dessus, vous pouvez désormais utiliser ce bloc externe comme un code principal tout en étant aussi interne qu'un code asynchrone.

vous voyez même console.log("i will run first") écrit après le code principal qu'il exécute en premier. Comment ? c'est ce qu'on appelle du code non bloquant ou asynchrone. Cela n'entrave pas les fonctionnalités principales de votre programme. Laissez-vous effectuer des opérations prenant du temps dans votre application telles que l'écriture et la lecture.

attente asynchrone

Le mot-clé wait est toujours enveloppé dans une fonction asynchrone et ne laissera pas les autres codes en dessous s'exécuter jusqu'à ce qu'il soit terminé. Async et wait sont une paire de clés. Encore une chose, wait est toujours placé avant les fonctions qui renvoient des promesses et toujours enveloppé dans le bloc try catch.

async function myPromise(){
 try{
  await doSomething(); // a function that return promise
  console.log("Your file is successfully created"); //only runs when promise is accepted
  }
  catch(err){
   console.log(err); // if promised is rejected;
  }
}
myPromise();
console.log("first");

sortie

# consider promise to be successful
first
Your file is successfully created

Comprendre jusqu'à présent (conclusion) :

1. Une fonction renvoie une promesse toujours enveloppée dans une attente asynchrone.
2. l'attente asynchrone va de pair.
3. Toujours envelopper wait dans le bloc try-catch. (référez-vous à mon blog sinon)
4. Désormais, un programme en dehors de la fonction asynchrone s'exécutera toujours, même s'il est résolu ou rejeté, comme indiqué ci-dessus. (c'est ça la beauté ?)
5. comprenons maintenant la promesse

commençons maintenant par les applications des promesses

1. Requêtes API - Apporter des données depuis un autre serveur
2. Opérations sur les fichiers - lecture et écriture de fichiers
3. Requêtes de base de données - récupérer ou écrire des données

Trouvez-vous quelque chose de commun à tous les cas d'utilisation ?

oui, toutes les applications prennent du temps à s'exécuter.

La promesse nous donne le super pouvoir pour gérer une telle situation de manière adéquate. Encore une fois, les promesses et l'attente asynchrone vont de pair.

Les promesses ont 3 états (comme indiqué dans l'exemple ci-dessus)

• résolu (si c'est le cas, notre fichier est créé avec succès et s'exécutera)
• rejeté (un code dans le bloc catch s'exécutera)
• en attente (il attendra et ne laissera aucun code s'exécuter dans la fonction)

créons une promesse personnalisée en JS

Un mot-clé asynchrone en dehors d'une fonction qui renvoie une promesse est purement facultatif. Voir le code ci-dessous...

récupérer les données

// trying to mimic as a server response
function fetchData(success=false){
  return new Promise((resolve,reject)=>{
    if(success){
      setTimeout(()=>{
        resolve("fetched successfully");
      },5000) // execute after 5 sec
    }
    else
    reject("server is not responding");
  })
}
// lets consider fetchData is in-built function

principal

/* lets consider fetchData is a in-built function that gets data from other server. We are passing success para to just mimic the server otherwise it does not serve any purpose here.
*/
async function getData(){
  try{
    let result = await fetchData(true);
    console.log(result) //fetched successfully
  }
  catch(err){
    console.log(err); // in case of rejection
  }
}
getData();
// load other code

L'autre code s'exécutera également quelles que soient les données récupérées ou non. Cela améliore les performances et améliore la qualité de notre code.

références

gestion des erreurs-par-aryen

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!