Comment récupérer les valeurs des fonctions de rappel asynchrones en JavaScript ?

Impossible de récupérer la valeur de la fonction de rappel asynchrone

Ce problème couramment rencontré comporte de nombreux fils de discussion sur Stack Overflow. Malgré des recherches approfondies, certains développeurs rencontrent toujours des difficultés pour accéder aux valeurs des rappels.

Le principal défi réside dans le fait que les méthodes synchrones ne peuvent pas renvoyer les valeurs des appels asynchrones. Comme illustré dans l'exemple fourni :

function foo(address){

  // google map stuff
  geocoder.geocode( { 'address': address}, function(results, status) {
      results[0].geometry.location; // I want to return this value
  })

}
foo(); //result should be results[0].geometry.location; value

Tenter de renvoyer directement la valeur souhaitée génère une réponse "indéfinie". Par la suite, des modifications ont été proposées mais en vain.

Un exemple d'une telle tentative :

function foo(address){
  var returnvalue;    
  geocoder.geocode( { 'address': address}, function(results, status) {
      returnvalue = results[0].geometry.location; 
  })
  return returnvalue; 
}
foo(); //still undefined

Résolution

La solution implique de passer un rappel à la fonction foo, qui recevra par la suite la valeur de retour :

function foo(address, fn){
  geocoder.geocode( { 'address': address}, function(results, status) {
     fn(results[0].geometry.location); 
  });
}

foo("address", function(location){
  alert(location); // this is where you get the return value
});

Asynchrone Fonctions et structures de rappel :

Les appels de fonctions internes asynchrones nécessitent l'utilisation de fonctions d'emballage également asynchrones afin de récupérer les réponses.

Bibliothèques et approches alternatives :

La gestion de nombreux rappels peut être simplifiée grâce à l'utilisation de bibliothèques de promesses comme Q. Ces frameworks fournissent un moyen pratique de gérer opérations asynchrones et accéder à leurs résultats de manière plus efficace et structurée.

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!