Comment attendre et renvoyer des valeurs à partir de fonctions asynchrones en JavaScript ?

Comment attendre et renvoyer des valeurs à partir de fonctions asynchrones

Lorsque vous travaillez avec des fonctions asynchrones, les valeurs renvoyées peuvent être différentes des fonctions synchrones. Dans cet article, nous allons explorer comment gérer ce comportement à l'aide de async-await.

Problème :

Supposons que vous ayez une fonction asynchrone getData qui récupère les données d'un API utilisant Axios. Pour récupérer les données et les enregistrer, vous essayez le code suivant :

const axios = require('axios');
async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}
console.log(getData());

Cependant, au lieu d'enregistrer les données, vous obtenez une promesse avec un état en attente.

Solution :

Le problème ici est que vous essayez d'attendre le résultat d'une fonction asynchrone en dehors d'une portée asynchrone. Pour résoudre ce problème, vous devez encapsuler le console.log dans une IIFE (Immediately Invoked Function Expression) asynchrone :

async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}

(async () => {
    const result = await getData();
    console.log(result);
})();

Ce modèle vous permet d'attendre le résultat de la fonction getData dans une portée asynchrone.

Syntaxe alternative :

Si votre fonction asynchrone ne repose pas sur le retour d'une promesse (par exemple, Axios renvoie une promesse), vous pouvez simplifier la syntaxe en supprimant l'async et attendez les mots-clés de getData.

function getData() {
    return axios.get('https://jsonplaceholder.typicode.com/posts');
}

Ensuite, utilisez la même structure IIFE qu'avant pour attendre le résultat :

(async () => {
    console.log(await getData());
})();

Plus d'informations :

Pour plus de détails sur la programmation async/await et asynchrone en JavaScript, reportez-vous aux ressources suivantes :

• [Async/Await in JavaScript](https://developer.mozilla.org/en -US/docs/Web/JavaScript/Reference/Operators/async_function)
• [Programmation asynchrone en JavaScript](https://javascript.info/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!