Maison > Article > interface Web > Comment utiliser wait en dehors d'une fonction asynchrone en JavaScript ?
Comment utiliser wait en dehors d'une fonction asynchrone en JavaScript ?
- WBOYavant
- 2023-08-26 16:53:021098parcourir
En JavaScript, le mot-clé async-await est utilisé pour rendre une fonction asynchrone. Si nous rendons une fonction asynchrone, elle fonctionne comme multi-threads et exécute le code en parallèle, ce qui nous aide à améliorer les performances des applications.
Ici, nous apprendrons à utiliser le mot-clé wait en dehors des fonctions asynchrones.
Fonction d'appel maintenant
Nous utiliserons l'expression dans cette méthode pour appeler la fonction immédiatement. Nous pouvons utiliser le mot-clé wait avec promise ou toute autre fonction à l'intérieur de la fonction.
Grammaire
Les utilisateurs peuvent utiliser des expressions de fonction pour appeler des fonctions immédiatement selon la syntaxe suivante.
(async () => {
let result = await fetchData();
})();
Dans la syntaxe ci-dessus, nous ne créons pas de fonction, mais à l'intérieur des accolades, nous avons écrit la syntaxe de la fonction flèche en utilisant les mots-clés async et wait.
Exemple 1
Dans l'exemple ci-dessous, nous appelons la fonction juste après l'avoir définie. A l'intérieur de l'expression, nous définissons la fonction flèche. Dans le bloc de code de la fonction arrow, nous avons utilisé le mot-clé wait et axios pour obtenir les données de l'API.
Nous avons ajouté CDN dans la section
pour utiliser axios. Dans le résultat, l'utilisateur peut observer les données que nous avons obtenues de l'API.<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
<h2>Using the <i>await</i> with immediately invoking function expression.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
(async () => {
let result = await axios.get("https://dummyjson.com/products/1");
output.innerHTML += "The results from the API is <br/>";
for (let key in result.data) {
output.innerHTML += key + " : " + result.data[key] + "<br/>";
}
})();
</script>
</body>
</html>
Utilisez la promesse
Nous pouvons utiliser Promise au lieu d'une fonction asynchrone pour attendre de recevoir une réponse du serveur ou suspendre l'exécution du code.
Grammaire
Les utilisateurs peuvent utiliser Promise en JavaScript selon la syntaxe suivante.
promise.then((response) => {
// use response
})
.catch((err) => {
// handle the errors
})
Dans la syntaxe ci-dessus, nous avons utilisé les blocs then() et catch() ainsi que Promise pour gérer les réponses et les erreurs.
Exemple 2
Dans l'exemple ci-dessous, nous faisons la même chose que l'exemple 1. Dans l'exemple 1, nous utilisons la syntaxe async-wait et axios pour obtenir les données. Ici, nous utilisons la promesse d'axios pour obtenir les données. La méthode axios.get() renvoie une promesse, que nous résolvons à l'aide des blocs then() et catch().
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
<h2>Using the <i>promises</i> instead of async-await.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
(() => {
axios.get("https://dummyjson.com/products/1").then((result) => {
output.innerHTML += "The results from the API is <br/>";
for (let key in result.data) {
output.innerHTML += key + " : " + result.data[key] + "<br/>";
}
})
.catch((err) => {
output.innerHTML += "The error is " + err;
})
})();
</script>
</body>
</html>
Exemple 3
Dans cet exemple, nous créons une Promise en utilisant le constructeur Promise() avec le nouveau mot-clé. Nous rejetons cet engagement.
Après cela, nous utilisons les blocs then() et catch() et la variable SamplePromise Promise pour obtenir la réponse ou l'erreur de la promesse. L'utilisateur peut observer que le contrôle va au bloc catch() dans la sortie car nous rejetons l'erreur.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
<h2>Using the <i>promises</i> instead of async-await.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let SamplePromise = new Promise((resolve, reject) => {
reject("Promise is rejected without any error");
})
SamplePromise.then((response)=>{
output.innerHTML += "Response from the promise is " + response;
})
.catch((err)=>{
output.innerHTML += "The error message is - " + err;
})
</script>
</body>
</html>
Ce tutoriel apprend aux utilisateurs à utiliser le mot-clé wait en dehors des fonctions asynchrones. De plus, nous avons expliqué une alternative à l'utilisation de Promise pour utiliser le mot-clé async-await.
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!