J'ai une fonction fooqui fait une requête Ajax. Comment puis-je retourner la réponse foo?

J'ai essayé de renvoyer la valeur du successrappel, ainsi que d'attribuer la réponse à une variable locale à l'intérieur de la fonction et de renvoyer celle-ci, mais aucune de ces façons ne renvoie réellement la réponse.

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- I tried that one as well
        }
    });

    return result;
}

var result = foo(); // It always ends up being `undefined`.

→ Pour une explication plus générale du comportement asynchrone avec différents exemples, veuillez consulter Pourquoi ma variable n'est-elle pas modifiée après l'avoir modifiée à l'intérieur d'une fonction? - Référence de code asynchrone

→ Si vous comprenez déjà le problème, passez aux solutions possibles ci-dessous.

Le problème

Le A à Ajax signifie asynchrone . Cela signifie que l'envoi de la demande (ou plutôt la réception de la réponse) est retiré du flux d'exécution normal. Dans votre exemple, $.ajaxrenvoie 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 successrappel ne soit appelée.

Voici une analogie qui, nous l'espérons, fait la différence entre le flux synchrone et asynchrone plus clair:

Synchrone

Imaginez que vous appeliez un ami et lui demandiez de rechercher quelque chose pour vous. Bien que cela puisse prendre un certain temps, vous attendez au téléphone et regardez dans l'espace, jusqu'à ce que votre ami vous donne la réponse dont vous aviez besoin.

La même chose se produit lorsque vous effectuez un appel de fonction contenant du code "normal":

function findItem() {
    var item;
    while(item_not_found) {
        // search
    }
    return item;
}

var item = findItem();

// Do something with item
doSomethingElse();

Même si l' findItemexécution peut prendre beaucoup de temps, tout code suivant var item = findItem();doit attendre que la fonction renvoie le résultat.

Asynchrone

Vous appelez à nouveau votre ami pour la même raison. Mais cette fois, vous lui dites que vous êtes pressé et qu'il devrait vous rappeler sur votre téléphone portable. Vous raccrochez, quittez la maison et faites tout ce que vous avez prévu de faire. Une fois que votre ami vous rappelle, vous traitez avec les informations qu'il vous a données.

C'est exactement ce qui se passe lorsque vous faites une demande Ajax.

findItem(function(item) {
    // Do something with item
});
doSomethingElse();

Au lieu d'attendre la réponse, l'exécution se poursuit immédiatement et l'instruction après l'exécution de l'appel Ajax. Pour obtenir la réponse à terme, vous fournissez une fonction à appeler une fois la réponse reçue, un rappel (remarquez quelque chose? Rappelez-vous ?). Toute instruction venant après cet appel est exécutée avant l'appel du rappel.

Solutions)

Adoptez la nature asynchrone de JavaScript! Bien que certaines opérations asynchrones fournissent des homologues synchrones (tout comme "Ajax"), il est généralement déconseillé de les utiliser, en particulier dans un contexte de navigateur.

Pourquoi est-ce mauvais demandez-vous?

JavaScript s'exécute dans le thread d'interface utilisateur du navigateur et tout processus de longue durée verrouillera l'interface utilisateur, ce qui la rendra insensible. De plus, il y a une limite supérieure sur le temps d'exécution pour JavaScript et le navigateur demandera à l'utilisateur de poursuivre ou non l'exécution.

Tout cela est une très mauvaise expérience utilisateur. L'utilisateur ne pourra pas dire si tout fonctionne bien ou non. De plus, l'effet sera pire pour les utilisateurs avec une connexion lente.

Dans ce qui suit, nous examinerons trois solutions différentes qui se construisent toutes les unes sur les autres:

• Promesses avecasync/await (ES2017 +, disponible dans les anciens navigateurs si vous utilisez un transpilateur ou un régénérateur)
• Rappels (populaires dans le nœud)
• Promesses avecthen() (ES2015 +, disponible dans les anciens navigateurs si vous utilisez l'une des nombreuses bibliothèques de promesses)

Les trois sont disponibles dans les navigateurs actuels et le nœud 7+.

ES2017 +: promesses avec async/await

La version ECMAScript publiée en 2017 a introduit la prise en charge au niveau syntaxique des fonctions asynchrones. Avec l'aide de asyncet await, vous pouvez écrire asynchrone dans un "style synchrone". Le code est toujours asynchrone, mais il est plus facile à lire / à comprendre.

async/awaits'appuie sur des promesses: une asyncfonction renvoie toujours une promesse. await"déballe" une promesse et aboutit à la valeur avec laquelle la promesse a été résolue ou génère une erreur si la promesse a été rejetée.

Important: Vous ne pouvez utiliser qu'à l' awaitintérieur d'une asyncfonction. Pour le moment, le niveau supérieur awaitn'est pas encore pris en charge, vous devrez donc peut-être créer une async IIFE ( Immediateely Invoked Function Expression ) pour démarrer un asynccontexte.

Vous pouvez en savoir plus sur asyncet awaitsur MDN.

Voici un exemple qui s'appuie sur le délai ci-dessus:

// Using 'superagent' which will return a promise.
var superagent = require('superagent')

// This is isn't declared as `async` because it already returns a promise
function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}


async function getAllBooks() {
  try {
    // GET a list of book IDs of the current user
    var bookIDs = await superagent.get('/user/books');
    // wait for 3 seconds (just for the sake of this example)
    await delay();
    // GET information about each book
    return await superagent.get('/books/ids='+JSON.stringify(bookIDs));
  } catch(error) {
    // If any of the awaited promises was rejected, this catch block
    // would catch the rejection reason
    return null;
  }
}

// Start an IIFE to use `await` at the top level
(async function(){
  let books = await getAllBooks();
  console.log(books);
})();

Prise en charge des versions actuelles du navigateur et des nœudsasync/await . Vous pouvez également prendre en charge des environnements plus anciens en transformant votre code en ES5 à l'aide de régénérateur (ou d'outils utilisant régénérateur, tels que Babel ).

Laisser les fonctions accepter les rappels

Un rappel est simplement une fonction passée à une autre fonction. Cette autre fonction peut appeler la fonction passée chaque fois qu'elle est prête. Dans le contexte d'un processus asynchrone, le rappel sera appelé chaque fois que le processus asynchrone est terminé. Habituellement, le résultat est transmis au rappel.

Dans l'exemple de la question, vous pouvez faire foo accepter un rappel et l'utiliser comme successrappel. Donc ça

var result = foo();
// Code that depends on 'result'

devient

foo(function(result) {
    // Code that depends on 'result'
});

Ici, nous avons défini la fonction "en ligne" mais vous pouvez passer n'importe quelle référence de fonction:

function myCallback(result) {
    // Code that depends on 'result'
}

foo(myCallback);

foo lui-même est défini comme suit:

function foo(callback) {
    $.ajax({
        // ...
        success: callback
    });
}

callbackfera référence à la fonction à foolaquelle nous passons lorsque nous l'appelons et nous la transmettons simplement à success. C'est-à-dire une fois que la demande Ajax est réussie,$.ajax appellera callbacket passera la réponse au rappel (auquel on peut se référer result, puisque c'est ainsi que nous avons défini le rappel).

Vous pouvez également traiter la réponse avant de la transmettre au rappel:

function foo(callback) {
    $.ajax({
        // ...
        success: function(response) {
            // For example, filter the response
            callback(filtered_response);
        }
    });
}

Il est plus facile d'écrire du code à l'aide de rappels qu'il n'y paraît. Après tout, JavaScript dans le navigateur est fortement piloté par les événements (événements DOM). La réception de la réponse Ajax n'est rien d'autre qu'un événement.
Des difficultés peuvent survenir lorsque vous devez travailler avec du code tiers, mais la plupart des problèmes peuvent être résolus en réfléchissant simplement au flux d'application.

ES2015 +: promesses avec then ()

L' API Promise est une nouvelle fonctionnalité d'ECMAScript 6 (ES2015), mais elle prend déjà en charge un bon navigateur . Il existe également de nombreuses bibliothèques qui implémentent l'API Promises standard et fournissent des méthodes supplémentaires pour faciliter l'utilisation et la composition des fonctions asynchrones (par exemple bluebird ).

Les promesses sont des conteneurs pour les valeurs futures . Lorsque la promesse reçoit la valeur (elle est résolue ) ou lorsqu'elle est annulée ( rejetée ), elle avertit tous ses "écouteurs" qui souhaitent accéder à cette valeur.

L'avantage par rapport aux rappels simples est qu'ils vous permettent de découpler votre code et qu'ils sont plus faciles à composer.

Voici un exemple simple d'utilisation d'une promesse:

function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

delay()
  .then(function(v) { // `delay` returns a promise
    console.log(v); // Log the value once it is resolved
  })
  .catch(function(v) {
    // Or do something else if it is rejected 
    // (it would not happen in this example, since `reject` is not called).
  });

Appliqué à notre appel Ajax, nous pourrions utiliser des promesses comme celle-ci:

function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(this.responseText);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);
    xhr.send();
  });
}

ajax("/echo/json")
  .then(function(result) {
    // Code depending on result
  })
  .catch(function() {
    // An error occurred
  });

Décrire tous les avantages de cette promesse dépasse le cadre de cette réponse, mais si vous écrivez du nouveau code, vous devez sérieusement les considérer. Ils fournissent une excellente abstraction et séparation de votre code.

Plus d'informations sur les promesses: HTML5 rocks - JavaScript Promises

Note latérale: les objets différés de jQuery

Les objets différés sont l'implémentation personnalisée de promesses par jQuery (avant la normalisation de l'API Promise). Ils se comportent presque comme des promesses mais exposent une API légèrement différente.

Chaque méthode Ajax de jQuery retourne déjà un "objet différé" (en fait une promesse d'un objet différé) que vous pouvez simplement renvoyer de votre fonction:

function ajax() {
    return $.ajax(...);
}

ajax().done(function(result) {
    // Code depending on result
}).fail(function() {
    // An error occurred
});

Note de côté: promesses gotchas

Gardez à l'esprit que les promesses et les objets différés ne sont que des conteneurs pour une valeur future, ils ne sont pas la valeur elle-même. Par exemple, supposons que vous disposiez des éléments suivants:

function checkPassword() {
    return $.ajax({
        url: '/password',
        data: {
            username: $('#username').val(),
            password: $('#password').val()
        },
        type: 'POST',
        dataType: 'json'
    });
}

if (checkPassword()) {
    // Tell the user they're logged in
}

Ce code comprend mal les problèmes d'asynchronie ci-dessus. Plus précisément, $.ajax()ne gèle pas le code pendant qu'il vérifie la page `` / mot de passe '' sur votre serveur - il envoie une demande au serveur et pendant qu'il attend, il renvoie immédiatement un objet jQuery Ajax Deferred, pas la réponse du serveur. Cela signifie que l' ifinstruction va toujours obtenir cet objet différé, le traiter comme trueet procéder comme si l'utilisateur était connecté. Pas bon.

Mais la solution est simple:

checkPassword()
.done(function(r) {
    if (r) {
        // Tell the user they're logged in
    } else {
        // Tell the user their password was bad
    }
})
.fail(function(x) {
    // Tell the user something bad happened
});

Déconseillé: appels "Ajax" synchrones

Comme je l'ai mentionné, certaines (!) Opérations asynchrones ont des homologues synchrones. Je ne préconise pas leur utilisation, mais pour des raisons d'exhaustivité, voici comment effectuer un appel synchrone:

Sans jQuery

Si vous utilisez directement un XMLHTTPRequestobjet, passez falsecomme troisième argument à .open.

jQuery

Si vous utilisez jQuery , vous pouvez définir l' asyncoption sur false. Notez que cette option est déconseillée depuis jQuery 1.8. Vous pouvez alors soit toujours utiliser un successrappel, soit accéder à la responseTextpropriété de l' objet jqXHR :

function foo() {
    var jqXHR = $.ajax({
        //...
        async: false
    });
    return jqXHR.responseText;
}

Si vous utilisez une autre méthode jQuery Ajax, tels que $.get, $.getJSON, etc., vous devez changer à $.ajax(puisque vous ne pouvez passer des paramètres de configuration$.ajax ).

La tête haute! Il n'est pas possible de faire une demande JSONP synchrone . JSONP par sa nature même est toujours asynchrone (une raison de plus pour ne même pas considérer cette option).

Si vous n'utilisez pas jQuery dans votre code, cette réponse est pour vous

Votre code devrait être quelque chose dans le sens de ceci:

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 excellent travail en écrivant une réponse pour les personnes utilisant jQuery pour AJAX, j'ai décidé de fournir une alternative pour les personnes qui ne le sont pas.

( Remarque, pour ceux qui utilisent la nouvelle fetchAPI, Angular ou promesses, j'ai ajouté une autre réponse ci-dessous )

Ce à quoi vous faites face

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

Le A dans AJAX signifie asynchrone . Cela signifie que l'envoi de la demande (ou plutôt la réception de la réponse) est retiré du flux d'exécution normal. Dans votre exemple, .sendrenvoie 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 successrappel ne soit appelée.

Cela signifie que lorsque vous revenez, l'écouteur que vous avez défini ne s'est pas encore exécuté, ce qui signifie que la valeur que vous retournez n'a pas été définie.

Voici une analogie simple

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

(Violon)

La valeur de aretournée est undefinedpuisque la a=5partie n'a pas encore été exécutée. AJAX agit comme ceci, vous retournez la valeur avant que le serveur n'ait la possibilité de dire à votre navigateur quelle est cette valeur.

Une solution possible à ce problème consiste à coder de manière réactive , en indiquant à votre programme quoi faire une fois le calcul terminé.

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

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

C'est ce qu'on appelle CPS . En gros, on passegetFive une action à effectuer lorsqu'elle se termine, nous disons à notre code comment réagir à la fin d'un événement (comme notre appel AJAX, ou dans ce cas le délai d'expiration).

L'utilisation serait:

getFive(onComplete);

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

Solutions possibles

Il existe essentiellement deux façons de résoudre ce problème:

1. Rendre l'appel AJAX synchrone (appelons-le SJAX).
2. Restructurez votre code pour qu'il fonctionne correctement avec les rappels.

1. AJAX synchrone - Ne le faites pas !!

Quant à l'AJAX synchrone, ne le faites pas! La réponse de Felix soulève des arguments convaincants pour expliquer pourquoi c'est une mauvaise idée. Pour résumer, cela gèle le navigateur de l'utilisateur jusqu'à ce que le serveur renvoie la réponse et crée une très mauvaise expérience utilisateur. Voici un autre court résumé tiré de MDN sur pourquoi:

XMLHttpRequest prend en charge les communications synchrones et asynchrones. En général, cependant, les demandes asynchrones doivent être préférées aux demandes synchrones pour des raisons de performances.

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

Si vous devez 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, le code foopeut être fait pour accepter un rappel. Nous dirons à notre code comment réagir une fois footerminé.

Donc:

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

Devient:

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

Ici, nous avons transmis une fonction anonyme, mais nous pourrions tout aussi facilement transmettre une référence à une fonction existante, la faisant 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 effectué, 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 en sorte que notre fonction foo accepte une action à exécuter lorsque l'AJAX se termine avec succès, nous pouvons l'étendre davantage en vérifiant si l'état de la réponse n'est pas 200 et en agissant en conséquence (créez un gestionnaire d'échec, etc.). Résoudre efficacement notre problème.

Si vous avez encore du mal à comprendre cela, lisez le guide de démarrage AJAX sur MDN.

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

Si vous n'utilisez pas jQuery et que vous voulez un joli court XMLHttpRequest 2 qui fonctionne sur les navigateurs modernes et également sur les navigateurs mobiles, je 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. Il est plus court que toutes les autres fonctions répertoriées.
2. Le rappel est défini directement (donc pas de fermetures inutiles supplémentaires).
3. Il utilise la nouvelle onload (vous n'avez donc pas à vérifier l'état de readystate &&)
4. Il y a d'autres situations dont je ne me souviens pas qui rendent le XMLHttpRequest 1 ennuyeux.

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

Le plus simple:

this.response

Ou si pour une raison quelconque vous bind()rappelez une classe:

e.target.response

Exemple:

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

Ou (celui ci-dessus est préférable, les fonctions anonymes sont toujours un problème):

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

Rien de plus simple.

Maintenant, certaines personnes diront probablement qu'il vaut mieux utiliser onreadystatechange ou même le nom de variable XMLHttpRequest. C'est faux.

Check-out les fonctionnalités avancées de XMLHttpRequest

Il supportait tous les * navigateurs modernes. Et je peux confirmer que j'utilise cette approche car XMLHttpRequest 2 existe. Je n'ai jamais eu aucun type de problème sur tous les navigateurs que j'utilise.

onreadystatechange n'est utile que si vous souhaitez obtenir les en-têtes sur l'état 2.

L'utilisation du XMLHttpRequestnom de variable est une autre grosse erreur car vous devez exécuter le rappel dans les 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 une fois ... c'est une fonction très courte, mais elle obtient et publie.

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 passez un élément de formulaire complet ( document.getElementsByTagName('form')[0]):

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

Ou définissez des 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 && synchronous brise complètement le point de la réponse. Quel est le bon moyen d'utiliser Ajax correctement?

Gestionnaire d'erreurs

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 de manière statique afin de ne pas compromettre la fonction. Le gestionnaire d'erreurs peut également être utilisé pour d'autres fonctions.

Mais pour vraiment sortir une erreur, la seule façon est d'écrire une mauvaise URL, auquel cas chaque navigateur renvoie une erreur.

Les gestionnaires d'erreurs peuvent être utiles si vous définissez des en-têtes personnalisés, définissez responseType sur un tampon de tableau d'objets blob ou autre ...

Même si vous passez 'POSTAPAPAP' comme méthode, cela ne générera pas d'erreur.

Même si vous passez 'fdggdgilfdghfldj' comme formdata, il ne générera pas d'erreur.

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

Dans le deuxième cas, cela fonctionne simplement. Vous devez vérifier côté serveur si vous avez transmis les bonnes données de publication.

cross-domain non autorisé lève automatiquement l'erreur.

Dans la réponse d'erreur, il n'y a aucun code d'erreur.

Il n'y a que le this.typequi est réglé sur erreur.

Pourquoi ajouter un gestionnaire d'erreurs si vous n'avez aucun contrôle sur les erreurs? La plupart des erreurs sont renvoyées à l'intérieur de cela dans la fonction de rappel displayAjax().

Donc: pas besoin de vérifier les erreurs si vous pouvez copier et coller l'URL correctement. ;)

PS: Lors du premier test, j'ai écrit x ('x', displayAjax) ..., et il a totalement obtenu une réponse ... ??? J'ai donc vérifié le dossier où se trouve le code 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 . J'ai lol

Lire un fichier synchrone

Ne fais pas ça.

Si vous souhaitez bloquer le navigateur pendant un certain temps, chargez un joli gros .txtfichier synchrone.

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

Maintenant vous pouvez faire

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

Il n'y a pas d'autre moyen de le faire de manière non asynchrone. (Ouais, avec la boucle setTimeout ... mais sérieusement?)

Un autre point est ... si vous travaillez avec des API ou tout simplement les fichiers de votre propre liste ou quoi que vous utilisiez toujours des fonctions différentes pour chaque demande ...

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 une utilisation de base.

Si vous souhaitez PROLONGER 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 uniquement ...

Mais vous pouvez faire beaucoup de choses avec XMLHttpRequest 2:

J'ai fait un gestionnaire de téléchargement (en utilisant des plages des deux côtés avec CV, filereader, système de fichiers), divers convertisseurs de resizers d'image utilisant canvas, peupler les bases de données web SQL avec base64images et bien plus encore ... Mais dans ces cas, vous ne devez créer une fonction que pour cela but ... parfois vous avez besoin d'un blob, de tampons de tableau, vous pouvez définir des en-têtes, remplacer le mimetype et il y en a beaucoup plus ...

Mais la question ici est de savoir comment renvoyer une réponse Ajax ... (J'ai ajouté un moyen simple.)

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

Cela signifie AngularJS, jQuery (avec différé), le remplacement natif de XHR (récupération), EmberJS, la sauvegarde de BackboneJS ou toute bibliothèque de nœuds qui renvoie des promesses.

Votre code devrait être quelque chose dans le sens de ceci:

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 excellent travail en écrivant une réponse pour les personnes utilisant jQuery avec des rappels pour AJAX. J'ai une réponse pour XHR natif. Cette réponse concerne l'utilisation générique des promesses 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 renvoie une promesse, les thengestionnaires sont toujours exécutés de manière asynchrone - c'est-à-dire après le code en dessous d'eux qui n'est pas dans un.then gestionnaire.

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

Voici une analogie simple pour le problème:

    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 dataest undefineddepuis ledata = 5 partie n'a pas encore été exécutée. Il s'exécutera probablement dans une seconde, mais à ce moment-là, il n'est plus pertinent pour la valeur renvoyée.

Étant donné que l'opération n'a pas encore eu lieu (AJAX, appel serveur, IO, minuterie), vous retournez la valeur avant que la demande n'ait la possibilité de dire à votre code quelle est cette valeur.

Une solution possible à ce problème consiste à coder de manière réactive , en indiquant à votre programme quoi faire une fois le calcul terminé. Les promesses permettent activement cela en étant de nature temporelle (sensible au temps).

Récapitulation rapide des promesses

Une promesse est une valeur dans le temps . Les promesses ont un état, elles commencent comme en attente sans valeur et peuvent se régler pour:

• remplie, 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 d'état qu'une seule fois, après quoi elle restera toujours dans le même état pour toujours. Vous pouvez associer des thengestionnaires à des promesses pour extraire leur valeur et gérer les erreurs. thenles gestionnaires permettent d' enchaîner les appels. Les promesses sont créées à l' aide d'API qui les renvoient . Par exemple, le remplacement AJAX plus moderne fetchou jQuery$.get promesses de retour .

Lorsque nous faisons appel .thenà une promesse et que nous en retournons quelque chose, nous obtenons une promesse pour la valeur traitée . Si nous rendons une autre promesse, nous aurons des choses incroyables, mais tenons nos chevaux.

Avec des promesses

Voyons comment nous pouvons résoudre le problème ci-dessus avec des promesses. Tout d'abord, démontrons notre compréhension des états promis d'en haut en utilisant le constructeur Promise 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 avoir converti setTimeout pour utiliser des promesses, nous pouvons utiliser thenpour 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 renvoyer une valeur que nous ne pouvons pas faire à cause du modèle de concurrence - nous retournons un wrapper pour une valeur que nous pouvons dérouler avec then. C'est comme une boîte avec laquelle vous pouvez ouvrir then.

Appliquer cela

Cela est le même pour votre appel d'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 ça marche aussi bien. Nous avons appris que nous ne pouvons pas renvoyer des valeurs d'appels déjà asynchrones, mais nous pouvons utiliser des promesses et les enchaîner pour effectuer le traitement. Nous savons maintenant comment renvoyer la réponse d'un appel asynchrone.

ES2015 (ES6)

ES6 introduit des générateurs qui sont des fonctions qui peuvent revenir au milieu puis reprendre le point où elles étaient. Ceci 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. Bien que cela soit intéressant en soi et ouvre de nombreuses possibilités, il existe un cas particulier intéressant.

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

Cette astuce quelque 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, en écrire une est quelques courtes lignes de code mais dépasse le cadre de cette réponse. J'utiliserai Bluebird Promise.coroutineici, mais il y a d'autres emballages comme coou 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 renvoie une promesse elle-même, que nous pouvons consommer à partir 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 y a plusieurs propositions en ce moment mais dans toutes, vous pouvez le awaitpromettre. Ceci est juste du "sucre" (syntaxe plus agréable) pour la proposition ES6 ci-dessus en ajoutant les mots async- awaitclés et . Faire 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
}

Cela renvoie quand même une promesse :)

Vous utilisez Ajax de manière incorrecte. L'idée n'est pas de lui faire retourner quoi que ce soit, mais plutôt de transmettre les données à quelque chose appelé une fonction de rappel, qui gère les données.

C'est:

function handleData( responseData ) {

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

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

Renvoyer quoi que ce soit dans le gestionnaire de soumission ne fera rien. Vous devez au lieu de cela remettre les données ou faire ce que vous voulez directement avec elles dans la fonction de réussite.

La solution la plus simple consiste à créer une fonction JavaScript et à l'appeler pour le successrappel Ajax .

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 répondrai avec une bande dessinée à la main horrible. La deuxième image est la raison pour laquelle resultest undefineddans votre exemple de code.

Angulaire1

Pour les personnes qui utilisent AngularJS , peuvent gérer cette situation en utilisant Promises.

Ici, il est dit,

Les promesses peuvent être utilisées pour supprimer les fonctions asynchrones et permettre de chaîner plusieurs fonctions ensemble.

Vous pouvez également trouver une belle explication ici .

Exemple trouvé dans les documents mentionnés 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 versions ultérieures

En Angular2regardant l'exemple suivant, mais il est recommandé de l'utiliser Observablesavec 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 cela de cette façon,

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

Voir le post original ici. Mais Typescript ne prend pas en charge les promesses natives d'es6 , si vous voulez l'utiliser, vous pourriez avoir besoin d'un plugin pour cela.

De plus, voici les promesses spécifiées ici.

La plupart des réponses ici donnent des suggestions utiles lorsque vous avez une seule opération asynchrone, mais parfois, cela se produit lorsque vous devez effectuer une opération asynchrone pour chaque entrée d'un tableau ou d'une autre structure de type liste. La tentation est de faire ceci:

// 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 pour laquelle cela ne fonctionne pas est que les rappels de doSomethingAsyncn'ont pas encore été exécutés au moment où vous essayez d'utiliser les résultats.

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

Parallèle

Vous pouvez tous les démarrer et garder une trace du nombre de rappels que vous attendez, puis utiliser les résultats lorsque vous avez reçu autant de rappels:

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 expectinget simplement utiliser results.length === theArray.length, mais cela nous laisse ouverts à la possibilité de theArraychanger pendant que les appels sont en attente ...)

Remarquez comment nous utilisons le indexfrom forEachpour enregistrer le résultat dans resultsla même position que l'entrée à laquelle il se rapporte, même si les résultats arrivent dans le désordre (car les appels asynchrones ne se terminent pas nécessairement dans l'ordre dans lequel ils ont été démarrés).

Mais que faire si vous devez renvoyer ces résultats à partir d'une fonction? Comme les autres réponses l'ont souligné, vous ne pouvez pas; vous devez avoir votre fonction accepter et appeler un rappel (ou retourner une promesse ). 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 renvoyant un à la Promiseplace:

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 doSomethingAsyncnous transmettions des erreurs, nous utiliserions rejectpour rejeter la promesse lorsque nous aurons 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 wrapper pour doSomethingAsyncque retourne une promesse, puis faites ce qui suit ...)

Si doSomethingAsyncvous donne une promesse , vous pouvez utiliser Promise.all:

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

Si vous savez que doSomethingAsynccela ignorera un deuxième et un troisième argument, vous pouvez simplement le passer directement à map( mapappelle son rappel avec trois arguments, mais la plupart des gens n'utilisent que le premier la plupart du temps):

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

Exemple:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
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.allrésout sa promesse avec un tableau des résultats de toutes les promesses que vous lui faites quand elles sont toutes résolues, ou rejette sa promesse lorsque la première des promesses que vous lui donnez rejette.

Séries

Supposons que vous ne vouliez pas que les opérations soient en parallèle? Si vous souhaitez les exécuter l'une après l'autre, vous devez attendre la fin de chaque opération avant de commencer la suivante. Voici un exemple d'une fonction qui fait cela et appelle un rappel 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 effectuons le travail en série, nous pouvons simplement l'utiliser results.push(result)car nous savons que nous n'obtiendrons pas de résultats en désordre. 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 une fois, créez un wrapper pour doSomethingAsynccela vous donne une promesse et faites ce qui suit ...)

Si doSomethingAsyncvous donne une promesse, si vous pouvez utiliser la syntaxe ES2017 + (peut-être avec un transpilateur comme Babel ), vous pouvez utiliser une asyncfonction avecfor-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 encore utiliser la syntaxe ES2017 +, vous pouvez utiliser une variante de la modèle "Promise réduire" (c'est plus complexe que la promesse habituelle de réduire car nous ne transmettons pas le résultat de l'un à l'autre, mais à la place regroupant 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;
}

... ce qui est moins encombrant avec fonctions flèches ES2015 + :

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;
}

Jetez un œil à 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 getJokeest le retour d' une résolution promesse (il est résolu lors du retour res.data.value). Vous attendez donc que la requête $ http.get soit terminée, puis que console.log (res.joke) soit exécuté (comme un flux asynchrone normal).

C'est le plnkr:

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

Chemin ES6 (async - attendre)

(function(){
  async function getJoke(){
    let response = await fetch('http://api.icndb.com/jokes/random');
    let data = await response.json();
    return data.value;
  }

  getJoke().then((joke) => {
    console.log(joke);
  });
})();

C'est l'un des endroits où la liaison de données ou le concept de magasin utilisé dans de nombreux nouveaux frameworks JavaScript fonctionnera très bien pour vous ...

Donc, si vous utilisez Angular, React ou tout autre framework qui utilise le concept de liaison de données ou de stockage de deux manières, ce problème est simplement résolu pour vous, donc en un mot, votre résultat est undefinedà la première étape, donc vous avez obtenu result = undefinedavant de recevoir le données, puis dès que vous obtenez le résultat, il sera mis à jour et affecté à la nouvelle valeur quelle réponse de votre appel Ajax ...

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

Vous pouvez utiliser un rappel , une promesse et récemment observable pour le gérer 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 de rappel ou d' abonnement sur observable .

Par exemple, dans votre cas où 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'informations, étudiez les promesses et les observables qui sont de nouvelles façons de faire ces trucs asynchrones.

C'est un problème très courant auquel nous sommes confrontés alors que nous luttons avec les «mystères» de JavaScript. Permettez-moi d'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ée avec son travail» avant la suivante dans l'ordre), et le résultat est le même que prévu.

Ajoutons maintenant un peu de torsion, en introduisant peu de retard dans notre fonction, afin que toutes les lignes de code ne soient pas «finies» dans l'ordre. Ainsi, il émulera le comportement asynchrone de la fonction:

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

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

Alors voilà, ce retard vient de casser la fonctionnalité que nous attendions! Mais que s'est-il passé exactement? Eh bien, c'est en fait assez logique si vous regardez le code. la fonction foo(), lors de son exécution, ne retourne rien (ainsi la valeur retournée est undefined), mais elle démarre un temporisateur, qui exécute une fonction après 1s pour retourner 'wohoo'. Mais comme vous pouvez le voir, la valeur attribuée à la barre est la substance immédiatement renvoyée par foo (), qui n'est rien, c'est-à-dire juste undefined.

Alors, comment abordons-nous ce problème?

Demandons à notre fonction une PROMESSE . La promesse est vraiment ce qu'elle signifie: cela signifie que la fonction vous garantit de fournir toute sortie qu'elle obtiendra à l'avenir. voyons donc 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'
});

Ainsi, le résumé est - pour aborder les fonctions asynchrones comme les appels basés sur ajax, etc., vous pouvez utiliser une promesse de resolvevaleur (que vous avez l'intention de renvoyer). Ainsi, en bref, vous résolvez la valeur au lieu de retourner , dans les fonctions asynchrones.

MISE À JOUR (promesses avec async / attente)

Outre l'utilisation then/catchpour travailler avec des promesses, il existe une autre approche. L'idée est de reconnaître une fonction asynchrone , puis d' attendre que les promesses soient résolues, avant de passer à la ligne de code suivante. C'est toujours promisessous le capot, mais avec une approche syntaxique différente. Pour rendre les choses plus claires, vous pouvez trouver une comparaison ci-dessous:

puis / catch version:

function saveUsers(){
     getUsers()
      .then(users => {
         saveSomewhere(users);
      })
      .catch(err => {
          console.error(err);
       })
 }

version asynchrone / en attente:

  async function saveUsers(){
     try{
        let users = await getUsers()
        saveSomewhere(users);
     }
     catch(err){
        console.error(err);
     }
  }

Une autre approche pour renvoyer une valeur à partir d'une fonction asynchrone consiste à passer un objet qui stockera le résultat de la fonction asynchrone.

Voici un exemple de la même:

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 le result objet 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 beaucoup cette approche. Je serais intéressé de savoir dans quelle mesure cette approche fonctionne lorsque le câblage du résultat via des modules consécutifs est impliqué.

Bien que les promesses et les rappels fonctionnent bien dans de nombreuses situations, il est difficile d'exprimer quelque chose comme:

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

Vous finiriez par passer async1; vérifiez s'il namen'est pas défini ou non et appelez le rappel en conséquence.

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

async1(name, async2)

Bien que cela soit correct dans de petits exemples, cela devient ennuyeux lorsque de nombreux cas similaires et une gestion des erreurs sont impliqués.

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 .

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

• Gérer les appels HTTP asynchrones;
• Attendez la réponse de chaque appel d'API;
• Utilisez le modèle Promise ;
• Utilisez le modèle Promise.all pour joindre plusieurs appels HTTP;

Cet exemple de travail est autonome. Il définira un objet de requête simple qui utilise l' XMLHttpRequestobjet window pour effectuer des appels. Il définira une fonction simple pour attendre qu'un tas de promesses soient terminées.

Le contexte. L'exemple interroge le point de terminaison de l' API Web Spotify afin de rechercher des playlistobjets 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 déclenchera un bloc - ExecutionBlock, analysera le résultat, planifiera un nouvel ensemble de promesses basé sur le tableau de résultats, c'est-à-dire une liste d' userobjets Spotify et exécutera le nouvel appel HTTP de ExecutionProfileBlockmanière asynchrone.

Vous pouvez alors voir une structure Promise imbriquée, qui vous permet de générer plusieurs appels HTTP imbriqués complètement et asynchrones, et de joindre les résultats de chaque sous-ensemble d'appels Promise.all.

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

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

Ainsi, pour exécuter l'exemple suivant, vous devez placer votre jeton d'accès dans les en-têtes de demande:

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 .

En bref, vous devez implémenter un rappel comme celui-ci:

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

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

Réponse 2017: vous pouvez désormais faire exactement ce que vous voulez dans chaque navigateur et nœud actuel

C'est assez simple:

• Renvoyer une promesse
• Utilisez l' attente , qui indiquera à JavaScript d'attendre que la promesse soit résolue en une valeur (comme la réponse HTTP)
• Ajoutez le mot clé 'async' à la fonction parent

Voici une version de travail de votre code:

(async function(){

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

})()

attendre est pris en charge dans tous les navigateurs actuels et le nœud 8

Js est un seul thread.

Le navigateur peut être divisé en trois parties:

1) Boucle d'événement

2) API Web

3) File d'attente des événements

La boucle d'événement fonctionne pour toujours, c'est-à-dire le type de boucle infinie. pour le suivant après que le premier soit exécuté. Cela signifie que l'exécution d'une fonction ne démarre pas tant que la fonction avant qu'elle ne soit en file d'attente ne soit exécutée dans la boucle d'événement.

Maintenant, pensons que nous avons poussé deux fonctions dans une file d'attente, l'une pour obtenir des données du serveur et une autre utilise ces données. Nous avons d'abord poussé la fonction serverRequest () dans la file d'attente puis la fonction utiliséData (). La fonction serverRequest va dans la boucle d'événements et fait un appel au serveur car nous ne savons jamais combien de temps il faudra pour obtenir des données du serveur, donc ce processus devrait prendre du temps et nous avons donc occupé notre boucle d'événements en suspendant ainsi notre page, c'est là que le Web L'API entre dans le rôle, elle prend cette fonction de la boucle d'événements et traite du fait que le serveur rend la boucle d'événements libre afin que nous puissions exécuter la fonction suivante de la file d'attente.La prochaine fonction dans la file d'attente est utiliseData () qui va en boucle mais en raison de l'absence de données disponibles, elle va le gaspillage et l'exécution de la fonction suivante se poursuivent jusqu'à la fin de la file d'attente (c'est ce qu'on appelle l'appel asynchrone, c'est-à-dire que nous pouvons faire autre chose jusqu'à ce que nous obtenions des données).

Supposons que notre fonction serverRequest () contienne une instruction return dans un code, lorsque nous récupérons les données du serveur, l'API Web les place 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. Ainsi, il n'est pas possible de renvoyer quelque chose depuis un appel asynchrone.

Ainsi, la solution à cela est un rappel ou une promesse .

Une image d'une des réponses ici, explique correctement l'utilisation du rappel ... Nous donnons notre fonction (fonction utilisant les données renvoyées par le 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, il est appelé

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");
}

Rappel Javscript.info

Vous pouvez utiliser cette bibliothèque personnalisée (écrite à l'aide de Promise) pour effectuer 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'utilisation simple:

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

Une autre solution consiste à exécuter du code via l'exécuteur séquentiel nsynjs .

Si la fonction sous-jacente est promise

nsynjs évaluera toutes les promesses séquentiellement et mettra le résultat de la promesse dans la dataproprié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 promise

Étape 1. Enveloppez la fonction avec rappel dans un wrapper prenant en charge nsynjs (s'il a une version promise, vous pouvez ignorer cette étape):

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;