si vous êtes et non en utilisant jQuery dans votre code, cette réponse est pour vous

votre code devrait être quelque chose du genre:

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
    return httpRequest.responseText;
}

var result = foo(); // always ends up being 'undefined'

Felix Kling a fait un bon travail en écrivant une réponse pour les gens qui utilisent jQuery pour AJAX, j'ai décidé de fournir une alternative pour les gens qui ne le sont pas.

( Note, pour ceux qui utilisent la nouvelle API fetch , Angular ou promises j'ai ajouté une autre réponse sous )

Ce que vous êtes confronté à

ceci est un résumé de" L'explication du problème " de l'autre réponse, si vous n'êtes pas sûr après avoir lu ceci, lire cela.

le a en AJAX signifie asynchrone . Cela signifie que l'envoi de la demande (ou plutôt la réception de la réponse) est retiré de la norme le flux d'exécution. Dans votre exemple, .send retourne immédiatement et l'instruction suivante, return result; , est exécutée avant même que la fonction que vous avez passée en tant que success ait été appelée.

cela signifie que lorsque vous retournez, l'auditeur que vous avez défini n'a pas encore exécuté, ce qui signifie que la valeur que vous retournez n'a pas été définie.

Voici une simple analogie

function getFive(){ 
    var a;
    setTimeout(function(){
         a=5;
    },10);
    return a;
}

(violon)

la valeur de a retournée est undefined puisque la partie a=5 n'a pas encore exécuté. AJAX agit comme ceci, vous retournez la valeur avant que le serveur ait eu la chance de dire à votre navigateur Quelle est cette valeur.

une solution possible à ce problème est de coder de façon réactive , en indiquant à votre programme ce qu'il faut faire lorsque le calcul est terminé.

function onComplete(a){ // When the code completes, do this
    alert(a);
}

function getFive(whenDone){ 
    var a;
    setTimeout(function(){
         a=5;
         whenDone(a);
    },10);
}

cela s'appelle CPS . Fondamentalement, nous passons getFive une action à effectuer quand il termine, nous disons à notre code comment réagir quand un événement termine (comme notre appel AJAX, ou dans ce cas le temps mort).

Usage serait:

getFive(onComplete);

qui devrait alerter" 5 " à l'écran. (violon) .

solutions possibles

il y a essentiellement deux façons de résoudre ce problème:

1. synchronisez L'appel AJAX (appelons-le SJAX).
2. restructurer votre code pour fonctionner correctement avec les callbacks.

1. AJAX synchrone - ne le faites pas!!

Comme pour AJAX synchrone, ne fais pas ça! la réponse de Félix soulève des arguments convaincants sur la raison pour laquelle c'est une mauvaise idée. En somme up, il va geler le navigateur de l'utilisateur jusqu'à ce que le serveur renvoie la réponse et créer une très mauvaise expérience utilisateur. Voici un autre court résumé tiré de MDN sur pourquoi:

XMLHttpRequest supporte les communications synchrones et asynchrones. En général, cependant, les requêtes asynchrones devraient être préférées aux requêtes synchrones pour des raisons de performance.

en bref, les requêtes synchrones bloquent l'exécution du code... ...cela peut causer de graves problèmes...

si vous avez pour le faire, vous pouvez passer un drapeau: Voici comment:

var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {// That's HTTP for 'ok'
  console.log(request.responseText);
}

2. Code de restructuration

laissez votre fonction accepter un rappel. Dans l'exemple de code foo peut être fait pour accepter un rappel. Nous allons dire à notre code comment réagir quand foo sera terminé.

:

var result = foo();
// code that depends on `result` goes here

devient:

foo(function(result) {
    // code that depends on `result`
});

ici, nous avons passé une fonction anonyme, mais nous pourrions tout aussi facilement passer une référence à une fonction existante, ce qui le fait ressembler à:

function myHandler(result) {
    // code that depends on `result`
}
foo(myHandler);

pour plus de détails sur la façon dont ce type de conception de rappel est fait, consultez la réponse de Felix.

maintenant, définissons foo lui-même pour agir en conséquence

function foo(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){ // when the request is loaded
       callback(httpRequest.responseText);// we're calling our method
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}

(violon)

nous avons maintenant fait que notre fonction foo accepte une action à exécuter lorsque L'AJAX est terminé avec succès, nous pouvons étendre cela en vérifiant si l'état de réponse n'est pas 200 et en agissant en conséquence (créer un gestionnaire de défaillance et tel). Résoudre efficacement notre problème.

si vous avez encore du mal à comprendre ce lisez le guide de démarrage AJAX à MDN.

XMLHttpRequest 2 (tout d'abord lire les réponses de Benjamin Gruenbaum & Felix Kling)

si vous n'utilisez pas jQuery et que vous voulez un court XMLHttpRequest 2 qui fonctionne sur les navigateurs modernes et aussi sur les navigateurs mobiles, je vous suggère de l'utiliser de cette façon:

function ajax(a, b, c){ // URL, callback, just a placeholder
  c = new XMLHttpRequest;
  c.open('GET', a);
  c.onload = b;
  c.send()
}

comme vous pouvez le voir:

1. c'est plus court que toutes les autres fonctions énumérées.
2. le rappel est réglé directement (donc pas de fermetures inutiles supplémentaires).
3. il utilise la nouvelle onload (de sorte que vous n'avez pas à vérifier pour readystate && statut)
4. il y a d'autres situations dont je ne me souviens pas qui rendent la XMLHttpRequest 1 ennuyeuse.

il y a deux façons d'obtenir la réponse de cet appel Ajax (trois utilisant le nom XMLHttpRequest var):

le le plus simple:

this.response

Ou si pour quelque raison vous bind() le rappel à une classe:

e.target.response

exemple:

function callback(e){
  console.log(this.response);
}
ajax('URL', callback);

Ou (ci-dessus, on est mieux les fonctions anonymes sont toujours un problème):

ajax('URL', function(e){console.log(this.response)});

rien de plus facile.

maintenant, certaines personnes vont probablement dire qu'il est préférable d'utiliser onreadystatechange ou même la variable XMLHttpRequest nom. C'est faux.

Check out XMLHttpRequest advanced features

il a supporté sur tous *les navigateurs modernes. Et je peux confirmer que j'utilise cette approche puisque XMLHttpRequest 2 existe. Je n'ai jamais eu aucun type de problème sur tous les navigateurs que j'utilise.

onreadystatechange est seulement utile si vous voulez obtenir les en-têtes sur l'état 2.

utilisant le nom de la variable XMLHttpRequest est une autre grosse erreur puisque vous devez exécuter le callback à l'intérieur des fermetures onload/oreadystatechange sinon vous l'avez perdu.

maintenant, si vous voulez quelque chose de plus complexe en utilisant post et FormData, vous pouvez facilement étendre cette fonction:

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.send(d||null)
}

encore ... c'est une fonction très courte, mais il ne get & post.

exemples d'utilisation:

x(url, callback); // By default it's get so no need to set
x(url, callback, 'post', {'key': 'val'}); // No need to set post data

ou passer un formulaire complet élément ( document.getElementsByTagName('form')[0] ):

var fd = new FormData(form);
x(url, callback, 'post', fd);

Ou de définir certaines valeurs personnalisées:

var fd = new FormData();
fd.append('key', 'val')
x(url, callback, 'post', fd);

comme vous pouvez le voir, je n'ai pas implémenté la synchronisation... c'est une mauvaise chose.

cela dit ... pourquoi ne pas le faire facilement?

comme mentionné dans le commentaire, l'utilisation de error & & & synchrone brise complètement le point de la réponse. Ce qui est une bonne façon courte D'utiliser Ajax dans le bon façon?

gestionnaire d'Erreur

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.onerror = error;
  c.send(d||null)
}

function error(e){
  console.log('--Error--', this.type);
  console.log('this: ', this);
  console.log('Event: ', e)
}
function displayAjax(e){
  console.log(e, this);
}
x('WRONGURL', displayAjax);

dans le script ci-dessus, vous avez un gestionnaire d'erreurs qui est défini statiquement de sorte qu'il ne compromette pas la fonction. Le gestionnaire d'erreur peuvent être utilisés pour d'autres fonctions.

mais pour vraiment obtenir une erreur le seulement façon est d'écrire une mauvaise URL dans lequel cas chaque navigateur jette une erreur.

les gestionnaires sont peut-être utiles si vous définissez des en-têtes personnalisés, définissez le type de responsabilité au tampon de tableau de blob ou n'importe quoi d'autre....

même si vous passez 'POSTAPAP' comme méthode, il ne lancera pas d'erreur.

même si vous passez 'fdggdgilfdghfldj' comme formdata il ne lancera pas d'erreur.

dans le premier cas, l'erreur se trouve à l'intérieur du displayAjax() sous this.statusText comme Method not Allowed .

dans le second cas, il suffit travail. Vous devez vérifier du côté du serveur si vous avez transmis les bonnes données post.

cross-domain non autorisé lance l'erreur automatiquement.

Dans la réponse d'erreur, il n'existe pas de codes d'erreur.

il n'y a que le this.type qui est défini à erreur.

Pourquoi ajouter un gestionnaire d'erreur si vous n'avez aucun contrôle sur les erreurs? La plupart des erreurs sont retournées dans la fonction callback. displayAjax() .

donc: pas besoin de vérifications d'erreurs si vous êtes capable de copier et coller l'URL correctement. ;)

PS: comme le premier test, j'ai écrit x('x', displayAjax)... et il est totalement obtenu une réponse...??? J'ai donc vérifié le dossier où se trouve le HTML, et il y avait un fichier appelé 'x.xml". Donc, même si vous oubliez l'extension de votre fichier XMLHttpRequest 2 le trouvera . I LOL'd

lire un fichier synchrone

ne faites pas ça.

si vous voulez bloquer le navigateur pendant un certain temps charger un gros fichier txt sympa synchrone.

function omg(a, c){ // URL
  c = new XMLHttpRequest;
  c.open('GET', a, true);
  c.send();
  return c; // Or c.response
}

Maintenant vous pouvez le faire

 var res = omg('thisIsGonnaBlockThePage.txt');

il n'y a pas d'autre moyen de le faire de façon non asynchrone. (Oui, avec la boucle setTimeout... mais sérieusement?)

un autre point est... si vous travaillez avec APIs ou si vous possédez les fichiers list ou n'importe quoi, vous utilisez toujours des fonctions différentes pour chaque requête...

seulement si vous avez une page où vous chargez toujours le même XML/JSON ou quoi que vous ayez besoin d'une seule fonction. Dans ce cas, modifiez un peu la fonction Ajax et remplacez b par votre Fonction spéciale.

les fonctions ci-dessus sont pour un usage de base.

Si vous voulez Étendre la fonction...

Oui, vous pouvez.

j'utilise beaucoup D'API et l'une des premières fonctions que j'intègre dans chaque page HTML est la première fonction Ajax dans cette réponse, avec GET only...

mais vous pouvez faire beaucoup de choses avec XMLHttpRequest 2:

j'ai fait un gestionnaire de téléchargement (en utilisant des gammes sur les deux côtés avec CV, filereader, système de Fichiers), divers convertisseurs de redimensionnement d'image en utilisant canvas, peuplez les bases de données websql avec base64images et bien plus encore... Mais dans ces cas, vous devez créer une fonction uniquement dans ce but... parfois, vous avez besoin d'un blob, des tampons de tableau, vous pouvez définir des en-têtes, outrepasser mimetype et il ya beaucoup plus...

mais la question ici est de savoir comment retourner une réponse Ajax... (J'ai ajouté un moyen facile.)

Si vous utilisez des promesses, cette réponse est pour vous.

cela signifie AngularJS, jQuery (avec différé), remplacement de XHR natif (fetch), EmberJS, sauvegarde de BackboneJS ou toute bibliothèque de noeuds qui renvoie des promesses.

votre code devrait être quelque chose du genre:

function foo() {
    var data;
    // or $.get(...).then, or request(...).then, or query(...).then
    fetch("/echo/json").then(function(response){
        data = response.json();
    });
    return data;
}

var result = foo(); // result is always undefined no matter what.

Felix Kling a fait un bon travail en écrivant une réponse pour les gens utilisant jQuery avec des rappels pour AJAX. J'ai une réponse pour XHR natif. Cette réponse est pour l'usage générique des promesses soit sur le frontend ou le backend.

La question centrale

le modèle de concurrence JavaScript dans le navigateur et sur le serveur avec NodeJS/io.js est asynchrone et réactif .

chaque fois que vous appelez une méthode qui retourne une promesse, les manipulateurs then sont toujours exécutée de manière asynchrone, après le code ci-dessous d'eux qui n'est pas dans un .then gestionnaire.

cela signifie que lorsque vous retournez data , le gestionnaire then que vous avez défini ne s'est pas encore exécuté. Cela signifie que la valeur que vous retournez n'a pas été définie à la bonne valeur dans le temps.

Voici une analogie simple pour la question:

    function getFive(){
        var data;
        setTimeout(function(){ // set a timer for one second in the future
           data = 5; // after a second, do this
        }, 1000);
        return data;
    }
    document.body.innerHTML = getFive(); // `undefined` here and not 5

la valeur de data est undefined puisque la partie data = 5 n'a pas encore été exécutée. Il sera probablement exécuter en une seconde, mais en ce moment c'est pas pertinente pour la valeur retournée.

puisque l'opération n'a pas encore eu lieu (AJAX, appel serveur, IO, minuterie) vous retournez la valeur avant que la requête ait la chance de dire à votre code ce qu'est cette valeur.

une solution possible à ce problème est de coder de manière réactive , dire à votre programme ce qu'il doit faire lorsque le calcul est terminé. Les promesses permettent activement ceci en étant de nature temporelle (sensible au temps).

récapitulatif Rapide de promesses

une Promesse est Une de la valeur au fil du temps . Les promesses ont état, elles commencent comme en attente sans valeur et peuvent se régler à:

• rempli ce qui signifie que le calcul s'est terminé avec succès.
• rejeté ce qui signifie que le calcul a échoué.

une promesse ne peut changer que les États une fois après quoi elle restera toujours dans le même état pour toujours. Vous pouvez attacher les handlers then à des promesses pour extraire leur valeur et gérer les erreurs. then gestionnaires de permettre de chaînage des appels. Les promesses sont créées par en utilisant des API qui retournent les . Par exemple, le remplacement plus moderne D'AJAX fetch ou les promesses de retour de jQuery $.get .

Quand nous appelons .then sur une promesse et retour quelque chose, nous obtenons une promesse pour la transformation de valeur . Si nous rendons une autre promesse, nous obtiendrons des choses étonnantes, mais retenons nos chevaux.

avec des promesses

voyons comment on peut résolvez la question ci-dessus avec des promesses. Tout d'abord, démontrons notre compréhension des états de promesse d'en haut en utilisant le constructeur de promesse pour créer une fonction de retard:

function delay(ms){ // takes amount of milliseconds
    // returns a new promise
    return new Promise(function(resolve, reject){
        setTimeout(function(){ // when the time is up
            resolve(); // change the promise to the fulfilled state
        }, ms);
    });
}

maintenant, après que nous avons converti setTimeout pour utiliser des promesses, nous pouvons utiliser then pour le faire compter:

function delay(ms){ // takes amount of milliseconds
  // returns a new promise
  return new Promise(function(resolve, reject){
    setTimeout(function(){ // when the time is up
      resolve(); // change the promise to the fulfilled state
    }, ms);
  });
}

function getFive(){
  // we're RETURNING the promise, remember, a promise is a wrapper over our value
  return delay(100).then(function(){ // when the promise is ready
      return 5; // return the value 5, promises are all about return values
  })
}
// we _have_ to wrap it like this in the call site, we can't access the plain value
getFive().then(function(five){ 
   document.body.innerHTML = five;
});

fondamentalement, au lieu de retourner un valeur que nous ne peut pas faire à cause du modèle de concurrence - nous retournons un wrapper pour une valeur que nous pouvons unwrap avec then . C'est comme une boîte qu'on peut ouvrir avec then .

l'Application de cette

c'est la même chose pour votre appel API d'origine, vous pouvez:

function foo() {
    // RETURN the promise
    return fetch("/echo/json").then(function(response){
        return response.json(); // process it inside the `then`
    });
}

foo().then(function(response){
    // access the value inside the `then`
})

donc cela fonctionne aussi bien. Nous avons appris que nous ne pouvons pas retourner des valeurs provenant d'appels asynchrones. mais nous pouvons utiliser des promesses et les enchaîner pour effectuer le traitement. Nous savons maintenant comment retourner la réponse d'un appel asynchrone.

ES2015 (ES6)

ES6 introduit generators qui sont des fonctions qui peuvent revenir au milieu et ensuite reprendre le point où ils étaient. Cela est généralement utile pour les séquences, par exemple:

function* foo(){ // notice the star, this is ES6 so new browsers/node/io only
    yield 1;
    yield 2;
    while(true) yield 3;
}

est une fonction qui renvoie un itérateur sur la séquence 1,2,3,3,3,3,.... qui peut être itérée. Tout cela est intéressant et ouvre la place pour beaucoup de possibilité, il est un cas intéressant.

si la séquence que nous produisons est une séquence d'actions plutôt que de nombres - nous pouvons mettre en pause la fonction chaque fois qu'une action est cédée et l'attendre avant de reprendre la fonction. Donc au lieu d'une séquence de numéros, nous avons besoin d'une séquence de avenir valeurs: des promesses.

cette astuce un peu délicate mais très puissante nous permet d'écrire du code asynchrone de manière synchrone. Il y a plusieurs "coureurs" qui font cela pour vous, l'écriture d'un est quelques courtes lignes de code, mais est au-delà de la portée de cette réponse. Je vais utiliser le Promise.coroutine de Bluebird ici, mais il y a d'autres emballages comme co ou Q.async .

var foo = coroutine(function*(){
    var data = yield fetch("/echo/json"); // notice the yield
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
});

cette méthode rend une promesse elle-même, que nous peut consommer d'autres coroutines. Par exemple:

var main = coroutine(function*(){
   var bar = yield foo(); // wait our earlier coroutine, it returns a promise
   // server call done here, code below executes when done
   var baz = yield fetch("/api/users/"+bar.userid); // depends on foo's result
   console.log(baz); // runs after both requests done
});
main();

ES2016 (ES7)

dans ES7, c'est encore plus standardisé, il ya plusieurs propositions en ce moment, mais dans chacun d'eux, vous pouvez await promesse. Il s'agit simplement de "sugar" (syntaxe plus agréable) pour la proposition ES6 ci-dessus en ajoutant les mots-clés async et await . Faisant l'exemple ci-dessus:

async function foo(){
    var data = await fetch("/echo/json"); // notice the await
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
}

il retourne toujours une promesse tout de même :)

vous utilisez Ajax incorrectement. L'idée n'est pas de le faire renvoyer quoi que ce soit, mais de transférer les données à quelque chose appelé une fonction de rappel, qui gère les données.

C'est-à-dire:

function handleData( responseData ) {

    // Do what you want with the data
    console.log(responseData);
}

$.ajax({
    url: "hi.php",
    ...
    success: function ( data, status, XHR ) {
        handleData(data);
    }
});

retourner quoi que ce soit dans le gestionnaire de soumission ne fera rien. Vous devez à la place soit transmettre les données, ou faire ce que vous voulez avec elle directement à l'intérieur de la fonction de succès.

la solution la plus simple est de créer une fonction JavaScript et de l'appeler pour le rappel Ajax success .

function callServerAsync(){
    $.ajax({
        url: '...',
        success: function(response) {

            successCallback(response);
        }
    });
}

function successCallback(responseObj){
    // Do something like read the response and show data
    alert(JSON.stringify(responseObj)); // Only applicable to JSON response
}

function foo(callback) {

    $.ajax({
        url: '...',
        success: function(response) {
           return callback(null, response);
        }
    });
}

var result = foo(function(err, result){
          if (!err)
           console.log(result);    
}); 

je vous répondrai avec une horrible BD dessinée à la main. La deuxième image est la raison pour laquelle result est undefined dans votre exemple de code.

Angular1

pour les personnes qui utilisent AngularJS , peut gérer cette situation en utilisant Promises .

Ici il dit,

promet peut être utilisé pour des fonctions asynchrones unnest et permet de enchaîner plusieurs fonctions ensemble.

vous pouvez trouver une belle explication ici aussi.

exemple trouvé dans docs mentionné ci-dessous.

  promiseB = promiseA.then(
    function onSuccess(result) {
      return result + 1;
    }
    ,function onError(err) {
      //Handle error
    }
  );

 // promiseB will be resolved immediately after promiseA is resolved 
 // and its value will be the result of promiseA incremented by 1.

Angular2 et plus Tard

Dans Angular2 avec un coup d'oeil à l'exemple suivant, mais son recommandé utiliser Observables avec Angular2 .

 search(term: string) {
     return this.http
  .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
  .map((response) => response.json())
  .toPromise();

}

Vous pouvez consommer que de cette manière,

search() {
    this.searchService.search(this.searchField.value)
      .then((result) => {
    this.result = result.artists.items;
  })
  .catch((error) => console.error(error));
}

voir le original post ici. Mais Typescript ne supporte pas natif ES6 promet , si vous voulez l'utiliser, vous pourriez avoir besoin d'un plugin pour cela.

en outre voici les promesses spec définir ici.

la plupart des réponses ici donnent des suggestions utiles pour quand vous avez une seule opération asynchrone, mais parfois, cela apparaît quand vous avez besoin de faire une opération asynchrone pour chaque entrée dans un tableau ou d'autres structures de type liste. La tentation est de le faire:

// WRONG
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log(results); // E.g., using them, returning them, etc.

exemple:

// WRONG
var theArray = [1, 2, 3];
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log("Results:", results); // E.g., using them, returning them, etc.

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

la raison qui ne fonctionne pas est que les rappels de doSomethingAsync n'ont pas encore couru au moment où vous essayez d'utiliser les résultats.

donc, si vous avez un tableau (ou une liste quelconque) et que vous voulez faire des opérations asynchrones pour chaque entrée, vous avez deux options: faire les opérations en parallèle (chevauchement), ou en série (l'une après l'autre dans l'ordre).

parallèle

vous pouvez démarrer chacun d'eux et garder une trace du nombre de rappels que vous attendez, et puis utiliser les résultats lorsque vous avez

var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

exemple:

var theArray = [1, 2, 3];
var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(nous pourrions supprimer expecting et juste utiliser results.length === theArray.length , mais cela nous laisse ouvert à la possibilité que theArray est changé pendant que les appels sont en suspens...)

notez comment nous utilisons le index de forEach pour sauvegarder le résultat dans results dans la même position que l'entrée à laquelle il se rapporte, même si les résultats arrivent hors de l'ordre (puisque les appels asynchrones ne sont pas nécessairement complets dans l'ordre dans lequel ils ont été lancés).

mais que faire si vous avez besoin de retourner ces résultats d'une fonction? Comme les autres réponses l'ont fait remarquer, vous ne pouvez pas; vous devez faire en sorte que votre fonction accepte et rappelle (ou renvoie une Promise ). Voici une version de rappel:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

exemple:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

Ou voici une version retour d'un Promise au lieu de:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

bien sûr, si doSomethingAsync nous donnait des erreurs, nous utiliserions reject pour rejeter la promesse quand nous avons eu une erreur.)

exemple:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(ou alternativement, vous pouvez faire un emballage pour doSomethingAsync qui retourne une promesse, et puis faire le ci-dessous...)

si doSomethingAsync vous donne un promesse , vous pouvez utiliser Promise.all :

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry, function(result) {
            results.push(result);
        });
    }));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

exemple:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry, function(result) {
            results.push(result);
        });
    }));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

notez que Promise.all résout sa promesse avec un tableau des résultats de toutes les promesses que vous lui donnez quand ils sont tous résolus, ou rejette sa promesse lors de la première des promesses que vous donnez il rejette.

série

supposez que vous ne voulez pas que les opérations soient en parallèle? Si vous souhaitez exécuter l'un après l'autre, vous avez besoin d'attendre pour chaque opération à réaliser avant de commencer la suivante. Voici un exemple d'une fonction qui le fait et appelle une callback avec le résultat:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

(puisque nous faisons le travail en série, nous pouvons simplement utiliser results.push(result) car nous savons que nous n'obtiendrons pas de résultats hors de l'ordre. Dans ce qui précède, nous aurions pu utiliser results[index] = result; , mais dans certains des exemples suivants nous n'avons pas d'index à utiliser.)

exemple:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(ou, encore, construire un wrapper pour doSomethingAsync qui vous donne une promesse et faire le ci-dessous...)

si doSomethingAsync vous donne une promesse, Si vous pouvez utiliser la syntaxe ES2017+ (peut-être avec un transpirateur comme Babel ), vous pouvez utiliser un async fonction avec for-of et await :

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

exemple:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

si vous ne pouvez pas utiliser la syntaxe ES2017+ (encore), vous pouvez utiliser une variation sur le "promesse réduire" pattern (c'est plus complexe que la promesse habituelle réduire parce que nous ne passons pas le résultat de l'un dans le prochain, mais au lieu de rassembler leurs résultats dans un tableau):

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

exemple:

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

...qui est moins encombrant avec ES2015 + fonctions Flèche :

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

exemple:

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

regardez cet exemple:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

    var getJoke = function(){
        return $http.get('http://api.icndb.com/jokes/random').then(function(res){
            return res.data.value;  
        });
    }

    getJoke().then(function(res) {
        console.log(res.joke);
    });
});

comme vous pouvez le voir getJoke est retour d'un résolu promesse (il est résolu en retournant res.data.value ). Donc, vous attendez jusqu'au $http.la requête get est terminée, puis la console .log(res.blague) est exécutée (normal asynchrone de flux).

This est le plnkr:

http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg /

une autre approche pour retourner une valeur d'une fonction asynchrone, est de passer dans un objet qui stockera le résultat de la fonction asynchrone.

voici un exemple de la même chose:

var async = require("async");

// This wires up result back to the caller
var result = {};
var asyncTasks = [];
asyncTasks.push(function(_callback){
    // some asynchronous operation
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;
            _callback();
        }
    });
});

async.parallel(asyncTasks, function(){
    // result is available after performing asynchronous operation
    console.log(result)
    console.log('Done');
});

j'utilise l'objet result pour stocker la valeur pendant l'opération asynchrone. Cela permet au résultat d'être disponible même après le travail asynchrone.

j'utilise souvent cette approche. Je serais intéressé pour savoir comment cette approche fonctionne lorsque le câblage le résultat à travers les modules consécutifs est impliqué.

C'est l'un des endroits que liaison de données à deux voies qui est utilisé dans de nombreux cadres JavaScript nouveau fonctionnera grandement pour vous...

donc si vous utilisez angulaire, réagir ou tout autre cadre qui font liaison de données à deux voies, cette question est simplement fixe pour vous, donc en termes simples, votre résultat est undefined à la première étape, donc vous avez obtenu result = undefined avant de recevoir le données, puis dès que vous obtenez le résultat, il sera mis à jour et obtenir assigné à la nouvelle valeur qui est répondre de votre appel Ajax...

mais comment faire en pur javascript ou jQuery par exemple comme vous l'avez demandé dans cette question?

Vous pouvez utiliser un rappel , promesse et récemment observables pour gérer cela pour vous, par exemple dans les promesses, nous avons une fonction comme success() ou then() qui sera exécutée lorsque vos données seront prêtes pour vous, de même avec la fonction callback ou subscribe on observable .

par exemple dans votre cas que vous utilisez jQuery , vous pouvez faire quelque chose comme ceci:

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); //after we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); //fooDone has the data and console.log it
    };

    foo(); //call happens here
});

pour plus d'information Etude sur promesses et observables qui sont de nouvelles façons de le faire async stuffs.

alors que les promesses et les rappels fonctionnent bien dans de nombreuses situations, c'est une douleur à l'arrière d'exprimer quelque chose comme:

if (!name) {
  name = async1();
}
async2(name);

vous finiriez par passer par async1 ; vérifiez si name n'est pas défini ou non et appelez le callback en conséquence.

async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)

alors qu'il est d'accord dans de petits exemples, il devient ennuyeux quand vous avez beaucoup de cas similaires et la manipulation des erreurs impliquées.

Fibers aide à résoudre le problème.

var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}

vous pouvez consulter le projet ici .

la réponse courte est, vous devez mettre en œuvre un rappel comme ceci:

function callback(response) {
    // Here you can do what ever you want with the response object.
    console.log(response);
}

$.ajax({
    url: "...",
    success: callback
});

L'exemple suivant, que j'ai écrit montre comment

• Gérer les appels HTTP asynchrones;
• Attendre pour la réponse de chaque appel d'API;
• Utiliser Promesse ;
• Utilisez Promesse.Tous les modèle de rejoindre plusieurs HTTP appels;

cet exemple pratique est autonome. Il définira un objet de requête simple qui utilise fenêtre XMLHttpRequest objet pour faire des appels. Il définira une fonction simple pour attendre qu'un tas de promesses soit accompli.

Context. L'exemple consiste à interroger le paramètre de L'API Web Spotify afin de rechercher les objets playlist pour un ensemble donné de chaînes de requête:

[
 "search?type=playlist&q=%22doom%20metal%22",
 "search?type=playlist&q=Adele"
]

pour chaque élément, une nouvelle promesse tirera un bloc - ExecutionBlock , analyser le résultat, programmer une nouvelle série de promesses basées sur le résultat array, c'est-à-dire une liste D'objets Spotify user et exécute le nouvel appel HTTP dans le ExecutionProfileBlock de manière asynchrone.

vous pouvez alors voir une structure de promesse imbriquée, qui vous permet de lancer des appels HTTP imbriqués multiples et complètement asynchrones, et de joindre les résultats de chaque sous-ensemble d'appels via Promise.all .

NOTE Les API récentes de Spotify search nécessiteront un jeton d'accès à spécifier dans les en-têtes de demande:

-H "Authorization: Bearer {your access token}" 

donc, pour exécuter l'exemple suivant, vous devez mettre votre token d'accès dans les en-têtes de requête:

var spotifyAccessToken = "YourSpotifyAccessToken";
var console = {
    log: function(s) {
        document.getElementById("console").innerHTML += s + "<br/>"
    }
}

// Simple XMLHttpRequest
// based on https://davidwalsh.name/xmlhttprequest
SimpleRequest = {
    call: function(what, response) {
        var request;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // Internet Explorer
            try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (e) {
                try {
                  request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }

        // State changes
        request.onreadystatechange = function() {
            if (request.readyState === 4) { // Done
                if (request.status === 200) { // Complete
                    response(request.responseText)
                }
                else
                    response();
            }
        }
        request.open('GET', what, true);
        request.setRequestHeader("Authorization", "Bearer " + spotifyAccessToken);
        request.send(null);
    }
}

//PromiseAll
var promiseAll = function(items, block, done, fail) {
    var self = this;
    var promises = [],
                   index = 0;
    items.forEach(function(item) {
        promises.push(function(item, i) {
            return new Promise(function(resolve, reject) {
                if (block) {
                    block.apply(this, [item, index, resolve, reject]);
                }
            });
        }(item, ++index))
    });
    Promise.all(promises).then(function AcceptHandler(results) {
        if (done) done(results);
    }, function ErrorHandler(error) {
        if (fail) fail(error);
    });
}; //promiseAll

// LP: deferred execution block
var ExecutionBlock = function(item, index, resolve, reject) {
    var url = "https://api.spotify.com/v1/"
    url += item;
    console.log( url )
    SimpleRequest.call(url, function(result) {
        if (result) {

            var profileUrls = JSON.parse(result).playlists.items.map(function(item, index) {
                return item.owner.href;
            })
            resolve(profileUrls);
        }
        else {
            reject(new Error("call error"));
        }
    })
}

arr = [
    "search?type=playlist&q=%22doom%20metal%22",
    "search?type=playlist&q=Adele"
]

promiseAll(arr, function(item, index, resolve, reject) {
    console.log("Making request [" + index + "]")
    ExecutionBlock(item, index, resolve, reject);
}, function(results) { // Aggregated results

    console.log("All profiles received " + results.length);
    //console.log(JSON.stringify(results[0], null, 2));

    ///// promiseall again

    var ExecutionProfileBlock = function(item, index, resolve, reject) {
        SimpleRequest.call(item, function(result) {
            if (result) {
                var obj = JSON.parse(result);
                resolve({
                    name: obj.display_name,
                    followers: obj.followers.total,
                    url: obj.href
                });
            } //result
        })
    } //ExecutionProfileBlock

    promiseAll(results[0], function(item, index, resolve, reject) {
        //console.log("Making request [" + index + "] " + item)
        ExecutionProfileBlock(item, index, resolve, reject);
    }, function(results) { // aggregated results
        console.log("All response received " + results.length);
        console.log(JSON.stringify(results, null, 2));
    }

    , function(error) { // Error
        console.log(error);
    })

    /////

  },
  function(error) { // Error
      console.log(error);
  });

<div id="console" />

j'ai longuement discuté de cette solution ici .

2017 réponse: vous pouvez maintenant faire exactement ce que vous voulez dans chaque navigateur et noeud actuels""

C'est assez simple:

• retourner une promesse
• utilisez le "attendez" , qui va dire à JavaScript d'attendre la promesse d'être résolu en une valeur (comme la réponse HTTP)
• ajouter le 'async' mot-clé de la fonction parent

Voici une version de travail de votre code:

(async function(){

var response = await superagent.get('...')
console.log(response)

})()

sont pris en charge dans tous les navigateurs actuels et noeud 8

vous pouvez utiliser cette bibliothèque personnalisée (écrite en utilisant la promesse) pour faire un appel à distance.

function $http(apiConfig) {
    return new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open(apiConfig.method, apiConfig.url);
        client.send();
        client.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                // Performs the function "resolve" when this.status is equal to 2xx.
                // Your logic here.
                resolve(this.response);
            }
            else {
                // Performs the function "reject" when this.status is different than 2xx.
                reject(this.statusText);
            }
        };
        client.onerror = function () {
            reject(this.statusText);
        };
    });
}

exemple D'usage Simple:

$http({
    method: 'get',
    url: 'google.com'
}).then(function(response) {
    console.log(response);
}, function(error) {
    console.log(error)
});

une autre solution consiste à exécuter le code par l'intermédiaire de l'exécuteur séquentiel nsynjs .

si la fonction sous-jacente est promisifiée

nsynjs évaluera toutes les promesses séquentiellement, et mettra le résultat de la promesse dans data propriété:

function synchronousCode() {

    var getURL = function(url) {
        return window.fetch(url).data.text().data;
    };
    
    var url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js';
    console.log('received bytes:',getURL(url).length);
    
};

nsynjs.run(synchronousCode,{},function(){
    console.log('synchronousCode done');
});

<script src="https://rawgit.com/amaksr/nsynjs/master/nsynjs.js"></script>

si la fonction sous-jacente n'est pas promisifiée

Étape 1. Envelopper la fonction avec rappel dans nsynjs-aware wrapper (s'il a promisified version, vous pouvez sauter ce test):

var ajaxGet = function (ctx,url) {
    var res = {};
    var ex;
    $.ajax(url)
    .done(function (data) {
        res.data = data;
    })
    .fail(function(e) {
        ex = e;
    })
    .always(function() {
        ctx.resume(ex);
    });
    return res;
};
ajaxGet.nsynjsHasCallback = true;

Étape 2. Mettre la logique synchrone en fonction:

function process() {
    console.log('got data:', ajaxGet(nsynjsCtx, "data/file1.json").data);
}

Étape 3. Exécuter la fonction de manière synchrone via nnsynjs:

nsynjs.run(process,this,function () {
    console.log("synchronous function finished");
});

Nsynjs évaluera pas à pas tous les opérateurs et expressions, en arrêtant l'exécution dans le cas où le résultat d'une certaine fonction lente n'est pas prêt.

plus d'exemples ici: https://github.com/amaksr/nsynjs/tree/master/examples

Js est un filetage simple.

Navigateur peut être divisé en trois parties:

1) Boucle D'Événement

2)API Web

3)File D'Attente D'Événements

Boucle d'Événement de pistes pour toujours je.e sorte de boucle infinie.Event Queue est l'endroit où toutes vos fonctions sont poussées sur un événement(exemple: click) ceci est un par un effectué hors de la file et mis dans la boucle D'événement qui exécutent ceci la fonction et le prépare soi-même pour ensuite l'un après premier est exécuté.Cela signifie que l'exécution d'une fonction ne commence pas avant que la fonction en file d'attente soit exécutée en boucle d'événements.

maintenant, pensons que nous avons poussé deux fonctions dans une file d'attente, l'une est pour obtenir des données à partir du serveur et l'autre utilise ces données.Nous avons d'abord appuyé sur la fonction serverRequest() dans la file d'attente, puis sur la fonction utiliseData (). la fonction serverRequest va dans la boucle d'événement et fait un appel au serveur comme nous jamais savoir combien de temps il faudra pour obtenir les données à partir du serveur donc, ce processus est censé prendre du temps et donc nous occupons notre boucle d'événement donc accrochant notre page, c'est là que L'API Web entre en jeu elle prend cette fonction de boucle d'événement et traite avec le serveur rendant la boucle d'événement libre afin que nous puissions exécuter la prochaine fonction à partir de la file d'attente.La fonction suivante dans la file d'attente est utiliseData () qui va en boucle mais en raison de l'absence de données disponibles il va gaspillage et l'exécution de la fonction suivante continue jusqu'à la fin de la file d'attente.(C'est appelé Async appelant I. e nous pouvons faire autre chose jusqu'à ce que nous obtenions des données)

supposons que notre fonction serverRequest() ait une instruction return dans un code, lorsque nous récupérons les données de l'API Web du serveur, elle les pousse dans la file d'attente à la fin de la file d'attente. Comme il est poussé à la fin de la file d'attente, nous ne pouvons pas utiliser ses données car il n'y a plus de fonction dans notre file d'attente pour utiliser ces données. il n'est donc pas possible de rendre quelque chose de L'appel asynchrone.

ainsi La Solution est callback ou promise .

une Image de l'une des réponses ici, explique correctement l'utilisation de callback... Nous donnons notre fonction (Fonction utilisant les données retournées du serveur) à la fonction serveur appelant.

 function doAjax(callbackFunc, method, url) {
  var xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.open(method, url);
  xmlHttpReq.onreadystatechange = function() {

      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
        callbackFunc(xmlHttpReq.responseText);
      }


  }
  xmlHttpReq.send(null);

}

dans mon Code on l'appelle

function loadMyJson(categoryValue){
  if(categoryValue==="veg")
  doAjax(print,"GET","http://localhost:3004/vegetables");
  else if(categoryValue==="fruits")
  doAjax(print,"GET","http://localhost:3004/fruits");
  else 
  console.log("Data not found");
}

lire ici pour les nouvelles méthodes dans ECMA (2016/17) pour faire un appel async(@Felix Kling réponse en haut) https://stackoverflow.com/a/14220323/7579856

voici quelques approches pour travailler avec des requêtes asynchrones:

2. Q - une bibliothèque de promesses pour JavaScript
3. A+ Promises.js
4. jQuery différé
5. XMLHttpRequest API
6. à l'Aide de rappel du concept, en tant Que mise en œuvre dans la première réponse

exemple: jQuery a reporté la mise en œuvre pour travailler avec des demandes multiples

var App = App || {};

App = {
    getDataFromServer: function(){

      var self = this,
                 deferred = $.Deferred(),
                 requests = [];

      requests.push($.getJSON('request/ajax/url/1'));
      requests.push($.getJSON('request/ajax/url/2'));

      $.when.apply(jQuery, requests).done(function(xhrResponse) {
        return deferred.resolve(xhrResponse.result);
      });
      return deferred;
    },

    init: function(){

        this.getDataFromServer().done(_.bind(function(resp1, resp2) {

           // Do the operations which you wanted to do when you
           // get a response from Ajax, for example, log response.
        }, this));
    }
};
App.init();

C'est une question très courante à laquelle nous faisons face tout en luttant contre les "mystères" du JavaScript. Laissez-moi essayer de démystifier ce mystère aujourd'hui.

commençons par une simple fonction JavaScript:

function foo(){
// do something 
 return 'wohoo';
}

let bar = foo(); // bar is 'wohoo' here

C'est un simple appel de fonction synchrone (où chaque ligne de code est 'terminé avec son travail' avant la prochaine en séquence), et le résultat est le même que prévu.

maintenant, ajoutons un peu de twist, par introduire peu de retard dans notre fonction, de sorte que toutes les lignes de code ne sont pas 'terminées' dans l'ordre. Ainsi, il émule le comportement asynchrone de la fonction:

function foo(){
 setTimeout( ()=>{
   return 'wohoo';
  }, 1000 )
}

let bar = foo() // bar is undefined here

Donc voilà, ce retard vient de casser la fonctionnalité que nous attendions! Mais qu'est-ce qui s'est passé ? En fait, c'est assez logique si vous regardez le code. la fonction foo() , lors de l'exécution, ne renvoie rien( donc la valeur retournée est undefined ), mais elle démarre une minuterie, qui exécute une fonction après 1s retourner "wohoo'. Mais comme vous pouvez le voir, la valeur attribuée à bar est immédiatement retourné trucs de foo(), pas autre chose qui vient plus tard.

alors, comment aborder cette question?

demandons notre fonction pour un promesse . La promesse est vraiment sur ce que cela signifie : il signifie que la fonction vous garantit de fournir avec toute sortie il obtient dans l'avenir. si voyons cela en action pour notre petit problème ci-dessus:

function foo(){
   return new Promise( (resolve, reject) => { // I want foo() to PROMISE me something
    setTimeout ( function(){ 
      // promise is RESOLVED , when execution reaches this line of code
       resolve('wohoo')// After 1 second, RESOLVE the promise with value 'wohoo'
    }, 1000 )
  })
}

let bar ; 
foo().then( res => {
 bar = res;
 console.log(bar) // will print 'wohoo'
});

donc, le résumé est-pour s'attaquer aux fonctions asynchrones comme les appels basés ajax etc, vous pouvez utiliser une promesse pour resolve la valeur (qui vous l'intention de revenir). Ainsi, en bref, vous résoudre valeur au lieu de retour , dans des fonctions asynchrones.

UPDATE (Promises with async/wait)

Outre l'utilisation de then/catch pour travailler avec des promesses, il existe une autre approche. L'idée est de reconnaître une fonction d'asynchrone puis l'attente des promesses à résoudre, avant de passer à la ligne suivante de code. Ce n'est encore que le promises sous le capot, mais avec une approche syntaxique différente. Pour rendre les choses plus claires, vous pouvez trouver une comparaison ci-dessous:

alors/catch version:

function fetchUsers(){
   let users = [];
   getUsers()
   .then(_users => users = _users)
   .catch(err =>{
      throw err
   })
   return users;
 }

async / attente version:

  async function fetchUsers(){
     try{
        let users = await getUsers()
        return users;
     }
     catch(err){
        throw err;
     }
  }

utilisez une fonction callback() dans le succès foo() . Essayez de cette façon. Il est simple et facile à comprendre.  

var lat = "";
var lon = "";
function callback(data) {
    lat = data.lat;
    lon = data.lon;
}
function getLoc() {
    var url = "http://ip-api.com/json"
    $.getJSON(url, function(data) {
        callback(data);
    });
}

getLoc();

ECMAScript 6 a des "générateurs" qui vous permettent de programmer facilement dans un style asynchrone.

function* myGenerator() {
    const callback = yield;
    let [response] = yield $.ajax("https://stackoverflow.com", {complete: callback});
    console.log("response is:", response);

    // examples of other things you can do
    yield setTimeout(callback, 1000);
    console.log("it delayed for 1000ms");
    while (response.statusText === "error") {
        [response] = yield* anotherGenerator();
    }
}

pour exécuter le code ci-dessus vous faites ceci:

const gen = myGenerator(); // Create generator
gen.next(); // Start it
gen.next((...args) => gen.next([...args])); // Set its callback function

si vous avez besoin de cibler des navigateurs qui ne prennent pas en charge ES6, vous pouvez exécuter le code via Babel ou closure-compiler pour générer ECMAScript 5.

Le rappel ...args sont enveloppés dans un tableau et déstructuré, lorsque vous les lisez, de sorte que le motif peut faites face aux callbacks qui ont plusieurs arguments. Par exemple avec noeud fs :

const [err, data] = yield fs.readFile(filePath, "utf-8", callback);

Short answer : votre méthode foo() retourne immédiatement, tandis que l'appel $ajax() exécute asynchrone après que la fonction retourne . Le problème est alors de savoir comment et où stocker les résultats récupérés par l'appel asynchrone une fois qu'il retourne.

plusieurs solutions ont été données dans ce fil. Peut-être la manière la plus simple est de passer un objet à la méthode foo() , et de stocker les résultats dans un membre de cet objet après l'appel asynchrone est terminée.

function foo(result) {
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;   // Store the async result
        }
    });
}

var result = { response: null };   // Object to hold the async result
foo(result);                       // Returns before the async completes

Notez que l'appel à foo() retournera toujours rien d'utile. Cependant, le résultat de l'appel asynchrone seront désormais stockées dans result.response .

bien sûr, il y a beaucoup d'approches comme demande synchrone, promesse, mais de mon expérience je pense que vous devriez utiliser l'approche de rappel. C'est naturel au comportement asynchrone de Javascript. Ainsi, votre code snippet peut être réécrit un peu différent:

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            myCallback(response);
        }
    });

    return result;
}

function myCallback(response) {
    // Does something.
}

la question était:

Comment retourner la réponse d'un appel asynchrone?

qui peut être interprété comme:"

Comment faire asynchrone code synchrone ?

la solution sera d'éviter les callbacks, et d'utiliser une combinaison de promesses et async / attente .

je voudrais donner un exemple d'une requête Ajax.

(bien qu'il puisse être écrit en Javascript, je préfère l'écrire en Python, et le compiler en Javascript en utilisant Transcrypt . Il sera assez clair.)

permet d'abord d'activer l'utilisation de JQuery, pour avoir $ disponible en tant que S :

__pragma__ ('alias', 'S', '$')

définir une fonction qui renvoie un promesse , dans ce cas un appel Ajax:

def read(url: str):
    deferred = S.Deferred()
    S.ajax({'type': "POST", 'url': url, 'data': { },
        'success': lambda d: deferred.resolve(d),
        'error': lambda e: deferred.reject(e)
    })
    return deferred.promise()

utilisez le code asynchrone comme si c'était synchrone :

async def readALot():
    try:
        result1 = await read("url_1")
        result2 = await read("url_2")
    except Exception:
        console.warn("Reading a lot failed")

nous Nous trouvons dans un univers qui semble progresser le long d'une dimension que nous appelons "temps". Nous ne comprenons pas vraiment ce qu'est le temps, mais nous avons développé des abstractions et un vocabulaire qui nous permettent de raisonner et d'en parler: "Passé", "Présent", "Futur" avant"," après".

les systèmes informatiques que nous construisons--de plus en plus--ont le temps comme dimension importante. Certaines choses sont prévues pour se produire dans le futur. Alors d'autres choses doivent se produire après ceux d'abord les choses se produire. C'est l'idée de base appelé "l'asynchronicité". Dans notre monde de plus en plus réseauté, le cas le plus courant d'asynchronisme est l'attente d'un système à distance pour répondre à une demande.

prenons un exemple. Appelle le laitier et commande du lait. Quand il s'agit, vous voulez mettre dans votre café. Vous ne pouvez pas mettre le lait dans votre café maintenant, parce qu'il n'est pas encore là. Vous devez attendre qu'il vienne avant de le mettre dans votre café. En d'autres termes, ce qui suit ne fonctionnera pas:

var milk = order_milk();
put_in_coffee(milk);

parce que JS n'a aucun moyen de savoir qu'il a besoin de attendre pour order_milk pour finir avant qu'il exécute put_in_coffee . En d'autres termes, il ne sait pas que order_milk est asynchrone --est quelque chose qui ne va pas se traduire dans le lait jusqu'à un certain temps futur. JS, et d'autres langues déclaratives, exécutent une instruction après l'autre sans attendre.

l'approche classique de JS à ce problème, profitant du fait que JS supporte des fonctions en tant qu'objets de première classe qui peuvent être passés, est de passer une fonction en tant que paramètre à la requête asynchone, qu'elle invoquera alors quand elle aura terminé sa tâche dans le futur. C'est l'approche du" rappel". Il ressemble à ceci:

order_milk(put_in_coffee);

order_milk démarre, commande le lait, puis, quand et seulement quand il arrive, il invoque put_in_coffee .

le problème avec cette approche de callback est qu'elle pollue la sémantique normale d'une fonction rapportant son résultat avec return ; au lieu de cela, les fonctions doivent signaler leurs résultats en appelant un callback donné comme paramètre. De plus, cette approche peut devenir rapidement lourde lorsqu'on doit faire face à des séquences d'événements plus longues. Par exemple, disons que je veux attendre le lait à mettre dans le café, et ensuite, et seulement ensuite effectuer une troisième étape, à savoir boire le café. Je finis par avoir besoin d'écrire quelque chose comme ceci:

order_milk(function(milk) { put_in_coffee(milk, drink_coffee); }

où je passe à put_in_coffee à la fois le lait à mettre dedans, et aussi l'action ( drink_coffee ) à exécuter une fois que le lait a été mis dedans. Un tel code devient difficile à écrire, à lire et à déboguer.

dans ce cas, nous pourrions réécrire le code dans la question comme:

var answer;
$.ajax('/foo.json') . done(function(response) {
  callback(response.data);
});

function callback(data) {
  console.log(data);
}

Entrez promesses

C'était la motivation de la notion de "promesse", qui est un type particulier de valeur qui représente un avenir ou asynchrone résultat d'une certaine sorte. Cela peut représenter quelque chose qui s'est déjà produit, ou qui va se produire dans le futur, ou qui pourrait ne jamais se produire du tout. Les promesses ont une seule méthode, appelée then , à laquelle vous passez une action à exécuter lorsque le résultat que la promesse représente a été réaliser.

dans le cas de notre lait et café, nous concevons order_milk pour retourner une promesse pour le lait arrivant, puis spécifier put_in_coffee comme une then action, comme suit:

order_milk() . then(put_in_coffee)

un avantage de ceci est que nous pouvons les ficeler ensemble pour créer des séquences d'événements futurs ("chaînage"):

order_milk() . then(put_in_coffee) . then(drink_coffee)

appliquons les promesses à votre problème particulier. Nous allons envelopper notre logique de demande à l'intérieur d'une fonction, qui renvoie une promesse:

function get_data() {
  return $.ajax('/foo.json');
}

en fait, tout ce que nous avons fait est d'ajouter un return à l'appel à $.ajax . Cela fonctionne parce que $.ajax de jQuery retourne déjà une sorte de promesse-comme chose. (Dans la pratique, sans entrer dans les détails, Nous préférerions conclure cet appel de manière à rendre une réelle promesse, ou utiliser une alternative à $.ajax qui le fait. Maintenant, si on veut charger le fichier et attendre qu'elle se termine et ensuite faire quelque chose, nous pouvons simplement dire

get_data() . then(do_something)

par exemple,

get_data() . 
  then(function(data) { console.log(data); });

en utilisant des promesses, nous finissons par passer beaucoup de fonctions dans then , il est donc souvent utile d'utiliser les fonctions de flèche de style ES6 plus compactes:

get_data() . 
  then(data => console.log(data));

Le async mot-clé

mais il y a encore quelque chose de vaguement insatisfait de devoir écrire du code d'une façon si synchrone et tout à fait manière différente si asynchrone. Pour synchrone, nous écrivons

a();
b();

mais si a est asynchrone, avec des promesses nous devons écrire

a() . then(b);

ci-dessus, nous avons dit "JS n'a aucun moyen de savoir qu'il a besoin de attendre pour que le premier appel se termine avant qu'il exécute le second". Ne serait-ce pas bien s'il y avait si était un moyen de dire ça à JS? Il s'avère qu'il est le await mot-clé, utilisé à l'intérieur d'un type spécial de fonction appelée une fonction "async". Cette fonctionnalité fait partie de la prochaine version de ES, mais est déjà disponible dans les transpilers tels que Babel avec les bons presets. Cela nous permet d'écrire simplement

async function morning_routine() {
  var milk   = await order_milk();
  var coffee = await put_in_coffee(milk);
  await drink(coffee);
}

Dans votre cas, vous pouvez écrire quelque chose comme

async function foo() {
  data = await get_data();
  console.log(data);
}

en utilisant ES2017 vous devriez avoir ceci comme la déclaration de fonction

async function foo() {
    var response = await $.ajax({url: '...'})
    return response;
}

et l'exécuter comme ceci.

(async function() {
    try {
        var result = await foo()
        console.log(result)
    } catch (e) {}
})()

ou la syntaxe Promise

foo().then(response => {
    console.log(response)

}).catch(error => {
    console.log(error)

})

voyons d'abord la forêt avant de regarder les arbres.

il y a beaucoup de réponses informatives avec de grands détails ici, Je ne vais pas les répéter. La clé de la programmation en JavaScript est d'avoir d'abord le modèle mental correct de l'exécution globale.

1. votre point d'entrée est exécuté à la suite d'un événement. Pour exemple, une étiquette de script avec le code est chargée dans navigateur. (En conséquence, c'est pourquoi vous devrez peut-être concerné par l' état de préparation de la page pour exécuter votre code s'il nécessite des éléments dom pour être construit en premier, etc.)
2. votre code s'exécute jusqu'à la fin--cependant beaucoup d'appels asynchrones il fait--sans exécuter n'importe quel de vos callbacks, y compris XHR les demandes, définir les délais, dom gestionnaires d'événements, etc. Chacun de ces rappels en attente d'être exécutés va s'asseoir dans une file d'attente, en attendant leur tour pour être courir après d'autres événements qui ont tiré ont tous terminé l'exécution.
3. chaque appel individuel vers une requête XHR, un délai d'attente ou un dom l'événement une fois invoquée sera alors exécuté jusqu'à la fin.

La bonne nouvelle est que si vous comprenez bien, vous n'aurez jamais à vous soucier des conditions de course. Vous devriez d'abord et avant tout chose de la façon dont vous voulez organiser votre code comme essentiellement la réponse à différents événements discrets, et comment vous je veux les assembler dans une séquence logique. Vous pouvez utiliser des promesses ou un niveau supérieur nouveau async/wait comme outils à cette fin, ou vous pouvez rouler votre propre.

mais vous ne devez pas utiliser d'outils tactiques pour résoudre un problème jusqu'à ce que vous êtes à l'aise avec le domaine de problème réel. Dessiner une carte de ces dépendances pour savoir ce qui doit s'exécuter lorsque. Tenter une approche ad-hoc à tous ces callbacks ne va tout simplement pas vous servir bien.

plutôt que de vous lancer du code, il y a 2 concepts clés pour comprendre comment JS gère les callbacks et l'asynchronicité. (est-ce encore un mot?)

La Boucle d'Événement et de Simultanéité Modèle

il y a trois choses que vous devez savoir; la file d'attente; la boucle d'événement et la pile

In en termes généraux et simplistes, la boucle d'événements est comme le chef de projet, elle est constamment à l'écoute de toutes les fonctions qui veulent s'exécuter et communique entre la file d'attente et la pile.

while (queue.waitForMessage()) {
   queue.processNextMessage();
}

une Fois qu'il reçoit un message d'exécuter quelque chose, il l'ajoute à la file d'attente. La file d'attente est la liste des choses qui attendent d'être exécutées (comme votre requête AJAX). imaginez-le ainsi:

 1. call foo.com/api/bar using foobarFunc
 2. Go perform an infinite loop
 ... and so on

quand l'un de ces messages va l'exécuter pop le message de la file d'attente et crée une pile, la pile est tout le JS doit exécuter pour exécuter l'instruction dans le message. Dans notre exemple, on nous dit d'appeler foobarFunc

function foobarFunc (var) {
  console.log(anotherFunction(var));
}

donc tout ce que foobarFunc doit exécuter (dans notre cas anotherFunction ) sera poussé sur la pile. exécuté , puis oublié - la boucle d'événement se déplacera alors sur la prochaine chose dans la file d'attente (ou écouter pour les messages)

l'essentiel ici est l'ordre d'exécution. C'est-à-dire

QUAND quelque chose va courir

lorsque vous faites un appel en utilisant AJAX à une partie externe ou exécutez n'importe quel code asynchrone (un setTimeout par exemple), Javascript dépend d'une réponse avant qu'elle ne puisse continuer.

la grande question est quand obtiendra-t-elle la réponse? La réponse est que nous ne savons pas-donc l'événement loop attend que ce message dise "Hey run me". Si JS attendait ce message en même temps, votre application gèlerait et ça serait nul. Ainsi JS continue à exécuter l'article suivant dans la file d'attente en attendant que le message soit ajouté de nouveau à la file d'attente.

C'est pourquoi avec la fonctionnalité asynchrone nous utilisons des choses appelées callbacks . C'est un peu comme un promesse littéralement. Comme au I promise to return something at some point jQuery utilise des callbacks spécifiques appelés deffered.done deffered.fail et deffered.always (entre autres). Vous pouvez les voir tous ici

donc ce que vous devez faire est de passer une fonction qui est promise à exécuter à un moment donné avec des données qui lui sont passées.

Parce qu'un rappel n'est pas exécutée immédiatement, mais plus tard il est important de passer la référence à la la fonction n'est pas exécuté. so

function foo(bla) {
  console.log(bla)
}

donc la plupart du temps (mais pas toujours) vous passerez foo pas foo()

J'espère que ça aura un sens. Quand vous rencontrez des choses comme ça qui semblent déroutantes - je recommande fortement de lire la documentation complètement pour au moins obtenir une compréhension de celui-ci. Cela fera de vous un bien meilleur développeur.