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

→ Pour une explication plus générale async comportement avec différents exemples, veuillez consulter Pourquoi ma variable inchangée après je le modifie à l'intérieur d'une fonction? - Le code asynchrone de référence

→ Si vous avez déjà comprendre le problème, passez à la des solutions possibles ci-dessous.

Le problème

La Un dans Ajax signifie asynchrone . Cela signifie que l'envoi de la demande (ou plutôt de la réception de la réponse) est retiré du flux d'exécution normale. Dans votre exemple, $.ajax renvoie immédiatement et l'instruction suivante, return result;, est exécutée avant que la fonction que vous avez passé comme success de rappel a même appelé.

Voici une analogie qui je l'espère rend la différence entre synchrone et asynchrone flux plus clair:

Synchrone

Imaginez-vous faire un appel téléphonique à un ami et demandez-lui de chercher quelque chose pour vous. Bien qu'il pourrait prendre un certain temps, vous attendez sur le téléphone et regarder dans l'espace, jusqu'à ce que votre ami vous donne la réponse que vous avez besoin.

La même chose qui se passe quand vous faites un appel de fonction contenant "normal" code:

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

var item = findItem();

//Do something with item
doSomethingElse();

Même si findItem peut prendre beaucoup de temps pour exécuter n'importe quel code à venir après var item = findItem(); a pour attendre jusqu'à ce que la fonction renvoie le résultat.

Asynchrone

Vous appelez votre ami de nouveau pour la même raison. Mais cette fois, vous lui dites que vous êtes pressé et il devrait vous rappeler sur votre téléphone mobile. Vous raccrochez, quitter la maison et faire ce que vous aviez prévu de faire. Une fois que votre ami vous appelle en arrière, vous avez affaire avec les informations qu'il vous a donné.

C'est exactement ce qui se passe quand vous faites une requête 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 suivant l'appel Ajax est exécutée. Pour obtenir la réponse par la suite, vous fournir une fonction qui doit être appelée une fois la réponse reçue, un rappel (remarquez quelque chose? de retour d'appel ?). Toute déclaration vient après que l'appel est exécuté avant le callback est appelée.

---

Solution(s)

Embrasser la nature asynchrone de JavaScript! Alors que certaines opérations asynchrones fournir synchrone homologues (ne sorte de "Ajax"), il est généralement déconseillé de les utiliser, surtout dans un contexte du navigateur.

Pourquoi est-il mauvais demandez-vous?

JavaScript s'exécute dans le thread de l'INTERFACE utilisateur du navigateur et un long processus en cours d'exécution de verrouillage de l'INTERFACE utilisateur, le rendant insensible. En outre, il existe une limite supérieure sur le temps d'exécution de JavaScript et le navigateur va demander à l'utilisateur s'il veut continuer l'exécution ou non.

Tout cela, c'est vraiment de la mauvaise expérience de l'utilisateur. L'utilisateur ne sera pas en mesure de dire si tout fonctionne bien ou pas. En outre, l'effet sera pire pour les utilisateurs avec une connexion lente.

Dans ce qui suit, nous étudierons trois solutions différentes qui sont tous les uns sur les autres:

• Promesses avec async/await (ES2017+, disponible dans les navigateurs plus anciens si vous utilisez un transpiler ou régénérateur)
• Rappels populaire (nœud)
• Promesses avec then() (ES2015+, disponible dans les navigateurs plus anciens si vous utilisez l'un des nombreux promesse bibliothèques)

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

---

ES2017+: des Promesses de async/await

ECMAScript version publiée en 2017 introduit de syntaxe au niveau de l'appui asynchrones fonctions. Avec l'aide de async et await, vous pouvez écrire asynchrone dans un "synchrone". Le code est encore asynchrone, mais c'est plus facile à lire/comprendre.

async/await s'appuie sur les promesses: une async fonction renvoie toujours une promesse. await "déballe" une promesse et soit à la valeur de la promesse a été résolu avec ou renvoie une erreur si la promesse a été rejetée.

Important: Vous ne pouvez utiliser await à l'intérieur d'un async fonction. Droit maintenant de haut niveau, await n'est pas encore pris en charge, de sorte que vous pourriez avoir à faire un async IIFE (Immédiatement Appelé La Fonction D'Expression) pour démarrer une async contexte.

Vous pouvez en lire plus à propos de async et attendre sur MDN.

Voici un exemple qui s'appuie sur le dessus de retard 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);
})();

Actuel navigateur et nœud prise en charge des versions async/await. Vous pouvez également en charge les anciens environnements en transformant votre code de ES5 avec l'aide de régénérateur (ou l'utilisation d'outils de régénérateur, comme Babel).

---

Laisser fonctions acceptent rappels

Un rappel est simplement passé à une autre fonction. Cette autre fonction peut appeler la fonction transmise à chaque fois que c'est prêt. Dans le contexte d'un processus asynchrone, le callback sera appelé à chaque fois que le processus asynchrone est fait. Généralement, le résultat est transmis à la fonction de rappel.

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

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

devient

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

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

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

foo(myCallback);

foo elle-même est définie comme suit:

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

callback fera référence à la fonction, nous passons à foo quand nous l'appelons et nous avons simplement transmettre à success. I. e. une fois la requête Ajax est un succès, $.ajax appellera callback et passer la réponse à la fonction de rappel (qui peut être appelée avec result, puisque c'est de cette façon que nous avons défini la fonction de rappel).

Vous pouvez également traiter la réponse avant de passer à la fonction de 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 que cela puisse paraître. Après tout, JavaScript dans le navigateur est largement piloté par les événements (événements DOM). La réception de l'Ajax réponse est rien d'autre, mais d'un événement.

Des difficultés peuvent survenir lorsque vous avez à travailler avec de la troisième partie du code, mais la plupart des problèmes peuvent être résolus par la seule pensée de par le flux de l'application.

---

ES2015+: des Promesses de alors()

La La promesse de l'API est une nouvelle fonctionnalité d'ECMAScript 6 (ES2015), mais il a de bonnes prise en charge du navigateur déjà. Il y a aussi beaucoup de bibliothèques qui mettent en œuvre la norme Promesses de l'API et de fournir de nouvelles méthodes pour faciliter l'utilisation et la composition de fonctions asynchrones (par exemple bluebird).

Promesses sont des conteneurs pour avenir valeurs. Lorsque la promesse reçoit la valeur (c'est résolu) ou lorsqu'il est annulé (rejeté), il en informe l'ensemble de ses "auditeurs" qui veulent accéder à cette valeur.

L'avantage par rapport à la plaine des rappels, c'est qu'ils vous permettent de découpler le code, et ils sont plus faciles à composer.

Voici un exemple simple de l'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 ceci:

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écrivant tous les avantages que la promesse offre est au-delà de la portée de cette réponse, mais si vous écrivez le nouveau code, vous devriez sérieusement considérer. Ils fournissent une grande abstraction et de la séparation de votre code.

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

Note de côté: jQuery différée des objets

Différés objets sont jQuery personnalisée de la mise en œuvre des promesses (avant que la Promesse de l'API a été normalisé). Ils se comportent presque comme des promesses, mais d'exposer un peu différente de l'API.

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

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

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

Note de côté: la Promesse de pièges

Garder à l'esprit que les promesses et différés objets conteneurs pour une valeur d'avenir, ils ne sont pas la valeur elle-même. Par exemple, supposons que vous avez eu la suivante:

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 ne comprend pas le au-dessus de l'asynchronie des questions. Plus précisément, $.ajax() ne gèle pas le code alors qu'il vérifie l' '/mot de passe " à la page sur votre serveur, il envoie une requête au serveur et pendant qu'il attend, renvoie immédiatement un jQuery Ajax Différée objet, pas la réponse du serveur. Cela signifie que le if déclaration va toujours obtenir ce Différé de l'objet, de le traiter comme true, et agir comme si l'utilisateur est connecté. Pas bonne.

Mais la solution est facile:

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

---

Pas recommandé: Synchrone "Ajax" appels

Comme je l'ai mentionné, certains(!) les opérations asynchrones ont synchrone homologues. Je ne défends pas leur utilisation, mais à des fins d'exhaustivité, voici comment vous pourriez effectuer un appel synchrone:

Sans jQuery

Si vous utilisez directement un XMLHTTPRequest objet, passer false comme troisième argument de .ouvrir.

jQuery

Si vous utilisez jQuery, vous pouvez définir la async option pour false. Notez que cette option est obsolète depuis jQuery 1.8.
Vous pouvez alors soit utiliser toujours une success de rappel ou d'accéder à l' responseText propriété de la jqXHR objet:

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

Si vous utilisez tout autre jQuery Ajax méthode, telle que $.get, $.getJSON, etc., vous devez le modifier pour $.ajax (puisque vous ne pouvez passer des paramètres de configuration pour $.ajax).

Heads up! Il n'est pas possible de faire un synchrones JSONP demande. JSONP, par sa nature, est toujours asynchrone (une raison de plus pour ne même pas envisager cette option).

OriginalL'auteur Felix Kling

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

Si vous n'avez pas utiliser jQuery et que vous voulez une belle 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. C'est plus courte que toutes les autres fonctions Énumérées.
2. La fonction de rappel est définie directement (donc pas inutile de fermetures).
3. Il utilise la nouvelle onload (si vous n'avez pas à vérifier readystate && mode)
4. Il y a d'autres situations où je ne me souviens pas que faire de la XMLHttpRequest 1 gênant.

Il y a deux façons d'obtenir la réponse à l'appel Ajax (trois à l'aide de XMLHttpRequest var nom):

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 diront probablement que c'est mieux d'utiliser onreadystatechange ou le même le XMLHttpRequest nom de la variable. C'est faux.

Découvrez XMLHttpRequest fonctionnalités avancées

Il pris en charge tous les navigateurs modernes. Et je peux confirmer que je suis en utilisant cette approche, car XMLHttpRequest 2 existe. Je n'ai jamais eu n'importe quel type de problème sur tous les navigateurs que j'utilise.

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

À l'aide de la XMLHttpRequest nom de la variable est une autre grosse erreur que vous avez besoin pour exécuter la fonction de rappel à l'intérieur de la onload/oreadystatechange fermetures d'autre vous l'avez perdu.

---

Maintenant, si vous voulez quelque chose de plus complexe à l'aide de la poste 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)
}

De nouveau ... c'est très court, mais c'est & 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 de passer un plein d'élément de formulaire (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 l'implémenter la synchronisation... c'est une mauvaise chose.

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

---

Comme mentionné dans le commentaire de l'utilisation de l'erreur && synchrone n'briser complètement le point de la réponse. Ce qui est une belle petite façon d'utiliser Ajax dans la bonne 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'erreur, qui est définis de manière statique afin de ne pas compromettre la fonction. Le gestionnaire d'erreur peuvent être utilisés pour d'autres fonctions.

Mais pour avoir vraiment une erreur de la seulement façon est d'écrire une URL erronée dans ce cas, tous les navigateur renvoie une erreur.

Gestionnaires d'erreurs sont peut-être utile si vous définissez des en-têtes personnalisés, définir la responseType blob tableau tampon ou quoi que...

Même si vous passez 'POSTAPAPAP' il ne va pas faire une erreur.

Même si vous passez 'fdggdgilfdghfldj" comme formdata il ne va pas faire une erreur.

Dans le premier cas, l'erreur est à l'intérieur de la displayAjax() sous this.statusText comme Method not Allowed.

Dans le second cas, il fonctionne tout simplement. Vous devez vérifier sur le côté serveur si vous avez passé le poteau droit des données.

de la croix-domaine non autorisé déclenche une erreur automatiquement.

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

Il n'est que le this.type qui est définie à l'erreur.

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

Donc: Pas besoin de contrôles d'erreur si vous êtes en mesure de copier et coller l'URL correctement. 😉

PS: Comme le premier test que j'ai écrit x ("x", displayAjax)..., et il a totalement eu une réponse...??? Donc j'ai vérifié le dossier où le HTML est situé, et il y a un fichier appelé 'x.xml'. Donc, même si vous oubliez l'extension de votre fichier XMLHttpRequest 2 TROUVEREZ. I LOL'd

---

Lire un fichier synchrone

Ne pas le faire.

Si vous souhaitez bloquer le navigateur pour un temps de charge d'une belle grosse .txt fichier 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 dans un non-asynchrone. (Ouais, avec setTimeout boucle... mais sérieusement?)

Un autre point, c'est... si vous travaillez avec des Api ou tout simplement votre propre liste de fichiers ou ce que vous utilisez toujours des fonctions différentes pour chaque demande...

Seulement si vous avez une page où vous chargez toujours le même XML/JSON ou tout ce que vous besoin d'une seule fonction. Dans ce cas, de modifier un peu la fonction Ajax et remplacer b avec votre fonction spéciale.

---

Les fonctions ci-dessus sont pour une utilisation de base.

Si vous souhaitez ÉTENDRE la fonction...

Oui, vous le pouvez.

Je suis avec beaucoup d'Api et de l'une des premières fonctions que j'intégrer dans chaque page HTML est la première Ajax fonction de cette réponse, avec seulement...

Mais vous pouvez faire beaucoup de choses avec XMLHttpRequest 2:

J'ai fait un gestionnaire de téléchargement (à l'aide de plages sur les deux côtés avec un résumé, filereader, système de fichiers), divers image resizers convertisseurs à l'aide de toile, remplir de web des bases de données SQL avec base64images et beaucoup plus... Mais dans ces cas, vous devez créer une fonction uniquement dans ce but... parfois, vous avez besoin d'un blob, tableau des tampons, vous pouvez définir des en-têtes, de remplacer le type mime et il y a beaucoup plus...

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

OriginalL'auteur cocco

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

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

OriginalL'auteur Hemant Bavle

Angular1

Pour les personnes qui sont à l'aide de AngularJS, de gérer cette situation à l'aide de Promises.

Ici il dit,

Promesses peuvent être utilisés pour unnest asynchrone fonctions et permet à la chaîne de multiples fonctions ensemble.

Vous trouverez une belle explication ici aussi.

Exemple trouvé dans docs 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 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 d'origine poster ici. Mais la Machine ne prend pas en charge natif es6 Promesses, si vous voulez l'utiliser, vous pourriez avoir besoin de plugin pour ça.

En outre, voici les promesses spec définir ici.

OriginalL'auteur Maleen Abewardana

Une autre approche de renvoyer une valeur à partir d'une fonction d'asynchrone, est de laisser un objet qui va stocker le résultat de la fonction d'asynchrone.

Ici est 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');
});

Je suis en utilisant le result objet pour stocker la valeur au cours de l'opération asynchrone. Cela permet que le résultat soit disponible, même après le travail asynchrone.

- Je utiliser cette approche beaucoup. Je serais intéressé de savoir comment cette approche fonctionne à où le câblage le résultat de retour par le biais de modules consécutifs est impliqué.

OriginalL'auteur jsbisht

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

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

Vous finirais en passant par async1; vérifier si name est pas défini ou non, et appeler la fonction de rappel en conséquence.

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

async1(name, async2)

Alors qu'il est bon dans de petits exemples, c'est embêtant quand vous avez beaucoup de cas similaires et d'erreur de manipulation en cause.

Fibers aide dans la résolution de la question.

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 télécharger le projet ici.

OriginalL'auteur rohithpr

2017 réponse: vous pouvez maintenant faire exactement ce que vous voulez dans chaque navigateur actuel et le nœud

C'est assez simple:

• Retour d'une Promesse
• Utiliser le 'attendre', qui va dire à JavaScript d'attendre la promesse d'être résolu en une valeur (comme la réponse HTTP)
• Ajouter le "asynchrone" mot-clé de la fonction parent

Voici une version de travail de votre code:

(async function(){

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

})()

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

OriginalL'auteur mikemaccana

Js est un seul thread.

Navigateur peut être divisé en trois parties:

1)Boucle D'Événement De

2)de l'API Web

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

Boucle d'événement de pistes pour toujours je.e sorte de boucle infinie.File d'attente d'événements est l'endroit où tous vos fonction sont poussés sur un événement(exemple:cliquez sur) c'est un par un procédé de file d'attente et le mettre dans la boucle d'Événements dont l'exécution de cette 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, de ne pas démarre jusqu'à la fonction avant de la file d'attente est exécutée en boucle d'événements.

Maintenant, laissez-nous penser, nous avons poussé les deux fonctions dans une file d'attente est pour obtenir des données à partir du serveur et l'autre utilise des données.Nous avons poussé la serverRequest() fonction dans la file d'attente d'abord, puis utiliseData() fonction. serverRequest fonction passe dans la boucle d'événement et fait un appel au serveur que nous ne savons jamais combien de temps il faudra pour obtenir les données à partir du serveur
donc, ce processus devrait prendre du temps et donc nous avons occupé notre boucle d'événement ainsi la pendaison de notre page, c'est là que l'API Web de venir dans le rôle profiter de cette fonction de boucle d'événements et de transactions avec le serveur événement de boucle, de sorte que nous pouvons exécuter la fonction suivante de la file d'attente.La fonction suivante dans la file d'attente est utiliseData() qui passe en boucle, mais en raison de l'absence de données disponibles, il va de déchets et de l'exécution de la prochaine fonction continue jusqu'à la fin de la file d'attente.(Ce qui est appelé Async appel je.e nous pouvons faire autre chose jusqu'à ce que nous obtenir des données)

Supposons notre serverRequest() la fonction a une instruction de retour dans un code, lorsque nous revenons de données à partir du serveur Web API va le pousser dans la file d'attente à la fin de la file d'attente.
Comme il obtenir poussé à la fin de la file d'attente on ne peut pas utiliser ses données comme il n'existe pas de fonction de gauche dans notre file d'attente à utiliser ces données.Ainsi, il n'est pas possible de retourner quelque chose d'Appel Asynchrone.

Donc la Solution c'est rappel ou promesse.

Une Image de l'une des réponses ici, Correctement explique rappel de l'utilisation...
Nous donnons notre fonction(fonction en utilisant les données renvoyées par le serveur) à la fonction d'appel serveur.

 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é comme

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 de l'ECMA(2016/17) pour faire appel asynchrone(@Felix Kling Réponse sur le Dessus)
https://stackoverflow.com/a/14220323/7579856

OriginalL'auteur Aniket Jha

ECMAScript 6 a 'des générateurs", qui vous permettent de programmer facilement en asynchrone style.

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 pour ce faire:

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 les navigateurs qui ne supportent pas l'ES6, vous pouvez exécuter le code par le biais de Babel ou la fermeture-compilateur 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 faire face à des rappels qui ont plusieurs arguments. Par exemple avec nœud fs:

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

OriginalL'auteur James

Utiliser un callback() fonction à l'intérieur de la foo() succès.
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();

OriginalL'auteur Mahfuzur Rahman

Bien sûr, il existe de nombreuses approches comme synchrone demande, de la promesse, mais de mon expérience, je pense que vous devriez utiliser la fonction de rappel de l'approche. Il est naturel de comportement asynchrone de Javascript.
Donc, votre extrait de code peut être réécrire un peu différent:

function foo() {
    var result;

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

    return result;
}

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

OriginalL'auteur Khoa Bui

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

Il y a beaucoup d'instructif réponses avec beaucoup de détails ici, je ne vais pas répéter l'un d'eux. La clé de la programmation en JavaScript est d'avoir d'abord le corriger modèle mental de l'ensemble de l'exécution.

1. Votre point d'entrée(s) est exécutée en tant que résultat d'un événement. Pour
   exemple, une balise de script avec le code est chargé dans le navigateur.
   (En conséquence, c'est pourquoi vous devrez peut-être concerné par l'
   préparation de la page pour l'exécution de votre code, si elle exige des éléments du dom
   pour être construit en premier, etc.)
2. De votre code s'exécute à l'achèvement--toutefois, de nombreux appels asynchrones c'
   fait-sans que l'exécution de tout de vos rappels, 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, attendant leur tour pour être exécuté après d'autres événements que les licenciés ont fini de l'exécution.
3. Chaque individu de rappel à une demande XHR, set timeout ou 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 devez d'abord et avant tout chose de la façon dont vous souhaitez organiser votre code essentiellement comme la réponse à différents événements discrets, et comment vous voulez le thread dans un ordre logique. Vous pouvez utiliser des promesses ou de niveau plus élevé de nouveaux async/await comme des outils à cette fin, ou vous pouvez rouler votre propre.

Mais vous ne devriez pas utiliser toute la tactique des outils pour résoudre un problème jusqu'à ce que vous êtes à l'aise avec le problème réel de domaine. Dessiner une carte de ces dépendances pour savoir ce qui doit s'exécuter lorsque. Tenter une approche ad-hoc pour tous ces rappels est tout simplement pas aller bien vous servir.

OriginalL'auteur Haim Zamir

Plutôt que de jeter de code à vous, il y a 2 concepts que sont la clé pour comprendre comment JS poignées de rappels et de 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 être conscient de; La file d'attente; la boucle d'événements et la pile

En large, en termes simplistes, la boucle d'événements, c'est comme le gestionnaire de projet, il est constamment à l'écoute de toutes les fonctions que voulez 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 sont en attente d'exécution (comme votre requête AJAX). imagine comme ça:

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

Lorsque l'un de ces messages s'apprête à exécuter, il apparaît 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. Ainsi, dans notre exemple, il est dit d'appeler foobarFunc

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

Donc tout ce qui foobarFunc a besoin pour s'exécuter (dans notre cas anotherFunction) obtenir poussé sur la pile. exécutée, et puis oublié - la boucle d'événement va alors se déplacer sur la chose suivante dans la file d'attente (ou écouter les messages)

Le point clé ici est de l'ordre de l'exécution. C'est

QUAND quelque chose va courir

Lorsque vous effectuez un appel à l'aide d'AJAX à un tiers ou à exécuter n'importe quel code asynchrone (un setTimeout par exemple), le Javascript est tributaire d'une réponse avant de procéder.

La grande question est: quand est-il d'obtenir la réponse? La réponse est que nous ne savons pas - de sorte que la boucle d'événement est en attente de ce message pour dire "hey run-moi". Si JS juste attendu pour ce message de façon synchrone votre application aurait pour effet de geler et il va le sucer. Donc, JS porte sur l'exécution de l'élément suivant dans la file d'attente en attendant que le message à faire de nouveau ajouté à la file d'attente.

C'est pourquoi avec asynchrone fonctionnalité nous utilisons des choses que l'on appelle rappels. C'est un peu comme un promesse littéralement. Comme je promesse de retourner quelque chose à un certain point jQuery utilise spécifiques rappels appelé deffered.done deffered.fail et deffered.always (parmi d'autres). Vous pouvez les voir tous les ici

Donc ce que vous devez faire est de passer une fonction qui est promis de les exécuter à un certain point avec les données qui lui est passé.

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 fonction n'est pas exécuté. donc

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

donc la plupart du temps (mais pas toujours), vous allez passer foo pas foo()

J'espère que ça va faire un certain sens. Lorsque vous rencontrez ce genre de choses qui semblent confus je recommande fortement la lecture de la documentation entièrement d'obtenir au moins une compréhension de celui-ci. Il va vous faire un bien meilleur développeur.

OriginalL'auteur Matthew Brent