Ich habe eine Funktion foo, die eine Ajax-Anfrage stellt. Wie kann ich die Antwort von zurückgeben foo?

Ich habe versucht, den Wert aus dem successRückruf zurückzugeben, die Antwort einer lokalen Variablen innerhalb der Funktion zuzuweisen und diese zurückzugeben, aber keine dieser Möglichkeiten gibt die Antwort tatsächlich zurück.

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`.

→ Eine allgemeinere Erklärung des asynchronen Verhaltens anhand verschiedener Beispiele finden Sie unter Warum bleibt meine Variable unverändert, nachdem ich sie innerhalb einer Funktion geändert habe? - Asynchrone Code-Referenz

→ Wenn Sie das Problem bereits verstanden haben, fahren Sie mit den folgenden möglichen Lösungen fort.

Das Problem

Das A in Ajax steht für asynchron . Das bedeutet, dass das Senden der Anforderung (oder vielmehr das Empfangen der Antwort) aus dem normalen Ausführungsfluss herausgenommen wird. In Ihrem Beispiel wird $.ajaxsofort zurückgegeben und die nächste Anweisung return result;wird ausgeführt, bevor die Funktion, die Sie als successRückruf übergeben haben, überhaupt aufgerufen wurde.

Hier ist eine Analogie, die hoffentlich den Unterschied zwischen synchronem und asynchronem Fluss klarer macht:

Synchron

Stellen Sie sich vor, Sie telefonieren mit einem Freund und bitten ihn, etwas für Sie nachzuschlagen. Obwohl es eine Weile dauern kann, warten Sie am Telefon und starren in den Weltraum, bis Ihr Freund Ihnen die Antwort gibt, die Sie benötigen.

Das gleiche passiert, wenn Sie einen Funktionsaufruf mit "normalem" Code ausführen:

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

var item = findItem();

// Do something with item
doSomethingElse();

Auch wenn findItemeine lange Zeit ausführen dauern kann, kommt jeder Code nach var item = findItem();muss warten , bis die Funktion das Ergebnis zurück.

Asynchron

Sie rufen Ihren Freund aus dem gleichen Grund erneut an. Aber diesmal sagst du ihm, dass du es eilig hast und er dich auf deinem Handy zurückrufen sollte. Sie legen auf, verlassen das Haus und tun, was Sie vorhatten. Sobald Ihr Freund Sie zurückruft, haben Sie es mit den Informationen zu tun, die er Ihnen gegeben hat.

Genau das passiert, wenn Sie eine Ajax-Anfrage stellen.

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

Anstatt auf die Antwort zu warten, wird die Ausführung sofort fortgesetzt und die Anweisung nach dem Ajax-Aufruf ausgeführt. Um die Antwort schließlich zu erhalten, geben Sie eine Funktion an, die aufgerufen werden kann, sobald die Antwort empfangen wurde, einen Rückruf (beachten Sie etwas? Rückruf ?). Jede Anweisung, die nach diesem Aufruf kommt, wird ausgeführt, bevor der Rückruf aufgerufen wird.

Lösung (en)

Umfassen Sie die asynchrone Natur von JavaScript! Während bestimmte asynchrone Operationen synchrone Gegenstücke bereitstellen (ebenso wie "Ajax"), wird generell davon abgeraten, diese zu verwenden, insbesondere in einem Browserkontext.

Warum ist es schlecht, fragst du?

JavaScript wird im UI-Thread des Browsers ausgeführt, und bei einem lang laufenden Prozess wird die Benutzeroberfläche gesperrt, sodass sie nicht mehr reagiert. Darüber hinaus gibt es eine Obergrenze für die Ausführungszeit von JavaScript, und der Browser fragt den Benutzer, ob die Ausführung fortgesetzt werden soll oder nicht.

All dies ist eine wirklich schlechte Benutzererfahrung. Der Benutzer kann nicht feststellen, ob alles einwandfrei funktioniert oder nicht. Darüber hinaus ist der Effekt für Benutzer mit einer langsamen Verbindung schlechter.

Im Folgenden werden drei verschiedene Lösungen betrachtet, die alle aufeinander aufbauen:

• Versprechen mitasync/await (ES2017 +, verfügbar in älteren Browsern, wenn Sie einen Transpiler oder Regenerator verwenden)
• Rückrufe (beliebt im Knoten)
• Versprechen mitthen() (ES2015 +, verfügbar in älteren Browsern, wenn Sie eine der vielen Versprechen-Bibliotheken verwenden)

Alle drei sind in aktuellen Browsern und Knoten 7+ verfügbar.

ES2017 +: Versprechen mit async/await

Mit der 2017 veröffentlichten ECMAScript-Version wurde die Unterstützung für asynchrone Funktionen auf Syntaxebene eingeführt. Mit Hilfe von asyncund awaitkönnen Sie asynchron in einem "synchronen Stil" schreiben. Der Code ist immer noch asynchron, aber leichter zu lesen / verstehen.

async/awaitbaut auf Versprechungen auf: Eine asyncFunktion gibt immer ein Versprechen zurück. await"packt" ein Versprechen aus und führt entweder zu dem Wert, mit dem das Versprechen gelöst wurde, oder wirft einen Fehler aus, wenn das Versprechen abgelehnt wurde.

Wichtig: Sie können nur awaitinnerhalb einer asyncFunktion verwenden. awaitDerzeit wird die oberste Ebene noch nicht unterstützt. Daher müssen Sie möglicherweise ein asynchrones IIFE ( sofort aufgerufener Funktionsausdruck ) erstellen , um einen asyncKontext zu starten .

Sie können mehr über asyncund awaitauf MDN lesen .

Hier ist ein Beispiel, das auf der obigen Verzögerung aufbaut:

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

Aktuelle Browser- und Knotenversionen unterstützen async/await. Sie können auch ältere Umgebungen unterstützen, indem Sie Ihren Code mithilfe von Regenerator (oder Tools, die Regenerator verwenden, wie z. B. Babel ) in ES5 umwandeln .

Lassen Sie Funktionen Rückrufe akzeptieren

Ein Rückruf ist einfach eine Funktion, die an eine andere Funktion übergeben wird. Diese andere Funktion kann die übergebene Funktion aufrufen, wann immer sie bereit ist. Im Kontext eines asynchronen Prozesses wird der Rückruf immer dann aufgerufen, wenn der asynchrone Prozess ausgeführt wird. Normalerweise wird das Ergebnis an den Rückruf übergeben.

Im Beispiel der Frage können Sie fooeinen Rückruf annehmen und als successRückruf verwenden. Also das

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

wird

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

Hier haben wir die Funktion "inline" definiert, aber Sie können jede Funktionsreferenz übergeben:

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

foo(myCallback);

foo selbst ist wie folgt definiert:

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

callbackwird sich auf die Funktion beziehen, an die wir übergeben, foowenn wir sie aufrufen, und wir geben sie einfach an weiter success. Dh wenn die Ajax-Anfrage erfolgreich ist, $.ajaxwird callbackdie Antwort aufgerufen und an den Rückruf weitergeleitet (auf den verwiesen werden kann result, da wir den Rückruf auf diese Weise definiert haben).

Sie können die Antwort auch verarbeiten, bevor Sie sie an den Rückruf weiterleiten:

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

Es ist einfacher, Code mithilfe von Rückrufen zu schreiben, als es scheint. Schließlich ist JavaScript im Browser stark ereignisgesteuert (DOM-Ereignisse). Das Empfangen der Ajax-Antwort ist nichts anderes als ein Ereignis.
Wenn Sie mit Code von Drittanbietern arbeiten müssen, können Schwierigkeiten auftreten. Die meisten Probleme können jedoch gelöst werden, indem Sie nur den Anwendungsfluss durchdenken.

ES2015 +: Verspricht mit then ()

Die Promise-API ist eine neue Funktion von ECMAScript 6 (ES2015), bietet jedoch bereits eine gute Browserunterstützung . Es gibt auch viele Bibliotheken, die die Standard-Promises-API implementieren und zusätzliche Methoden bereitstellen, um die Verwendung und Zusammensetzung von asynchronen Funktionen (z . B. Bluebird ) zu vereinfachen .

Versprechen sind Container für zukünftige Werte. Wenn das Versprechen den Wert erhält (es wird aufgelöst ) oder wenn es storniert ( abgelehnt ) wird, benachrichtigt es alle "Listener", die auf diesen Wert zugreifen möchten.

Der Vorteil gegenüber einfachen Rückrufen besteht darin, dass Sie Ihren Code entkoppeln können und einfacher zu erstellen sind.

Hier ist ein einfaches Beispiel für die Verwendung eines Versprechens:

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

Auf unseren Ajax-Aufruf angewendet könnten wir solche Versprechen verwenden:

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

Die Beschreibung aller Vorteile, die das Versprechen bietet, würde den Rahmen dieser Antwort sprengen. Wenn Sie jedoch neuen Code schreiben, sollten Sie diese ernsthaft in Betracht ziehen. Sie bieten eine großartige Abstraktion und Trennung Ihres Codes.

Weitere Informationen zu Versprechungen: HTML5 rockt - JavaScript-Versprechungen

Randnotiz: Zurückgestellte Objekte von jQuery

Zurückgestellte Objekte sind die benutzerdefinierte Implementierung von Versprechen durch jQuery (bevor die Promise-API standardisiert wurde). Sie verhalten sich fast wie Versprechen, zeigen jedoch eine etwas andere API.

Jede Ajax-Methode von jQuery gibt bereits ein "zurückgestelltes Objekt" zurück (eigentlich ein Versprechen eines zurückgestellten Objekts), das Sie einfach von Ihrer Funktion zurückgeben können:

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

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

Randnotiz: Versprechen Fallstricke

Denken Sie daran, dass Versprechen und zurückgestellte Objekte nur Container für einen zukünftigen Wert sind, sie sind nicht der Wert selbst. Angenommen, Sie hatten Folgendes:

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
}

Dieser Code versteht die oben genannten Asynchronitätsprobleme falsch. Insbesondere wird $.ajax()der Code nicht eingefroren, während die Seite '/ password' auf Ihrem Server überprüft wird. Er sendet eine Anforderung an den Server und gibt während des Wartens sofort ein jQuery Ajax Deferred-Objekt zurück, nicht die Antwort vom Server. Das bedeutet, dass die ifAnweisung dieses verzögerte Objekt immer abruft, als behandelt trueund so fortfährt, als wäre der Benutzer angemeldet. Nicht gut.

Aber die Lösung ist einfach:

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

Nicht empfohlen: Synchrone "Ajax" -Aufrufe

Wie bereits erwähnt, haben einige (!) Asynchrone Operationen synchrone Gegenstücke. Ich befürworte ihre Verwendung nicht, aber der Vollständigkeit halber würden Sie hier einen synchronen Anruf ausführen:

Ohne jQuery

Wenn Sie ein XMLHTTPRequestObjekt direkt verwenden , übergeben Sie es falseals drittes Argument an .open.

jQuery

Wenn Sie jQuery verwenden , können Sie die asyncOption auf setzen false. Beachten Sie, dass diese Option seit jQuery 1.8 veraltet ist. Sie können dann entweder noch einen successRückruf verwenden oder auf die responseTextEigenschaft des jqXHR-Objekts zugreifen :

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

Wenn Sie eine andere jQuery Ajax - Methode verwenden, wie zum Beispiel $.get, $.getJSONusw., müssen Sie es ändern $.ajax(da Sie nur Konfigurationsparameter passieren können $.ajax).

Kopf hoch! Es ist nicht möglich, eine synchrone JSONP- Anfrage zu stellen. JSONP ist von Natur aus immer asynchron (ein weiterer Grund, diese Option nicht einmal in Betracht zu ziehen).

Wenn Sie nicht jQuery in Ihrem Code verwenden, ist diese Antwort für Sie

Ihr Code sollte ungefähr so ​​aussehen:

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 hat gute Arbeit geleistet und eine Antwort für Leute geschrieben, die jQuery für AJAX verwenden. Ich habe beschlossen, eine Alternative für Leute bereitzustellen, die es nicht sind.

( Hinweis: Für diejenigen, die die neue fetchAPI, Angular oder Versprechen verwenden, habe ich unten eine weitere Antwort hinzugefügt. )

Was du vor dir hast

Dies ist eine kurze Zusammenfassung von "Erklärung des Problems" aus der anderen Antwort. Wenn Sie sich nach dem Lesen nicht sicher sind, lesen Sie diese.

Das A in AJAX steht für asynchron . Das bedeutet, dass das Senden der Anforderung (oder vielmehr das Empfangen der Antwort) aus dem normalen Ausführungsfluss herausgenommen wird. In Ihrem Beispiel wird .sendsofort zurückgegeben und die nächste Anweisung return result;wird ausgeführt, bevor die Funktion, die Sie als successRückruf übergeben haben, überhaupt aufgerufen wurde.

Dies bedeutet, dass der von Ihnen definierte Listener bei Ihrer Rückkehr noch nicht ausgeführt wurde. Dies bedeutet, dass der von Ihnen zurückgegebene Wert nicht definiert wurde.

Hier ist eine einfache Analogie

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

(Geige)

Der Wert von areturn ist, undefinedda das a=5Teil noch nicht ausgeführt wurde. AJAX verhält sich so: Sie geben den Wert zurück, bevor der Server Ihrem Browser mitteilen kann, um welchen Wert es sich handelt.

Eine mögliche Lösung für dieses Problem ist es , Code wieder aktiv , erzählen Sie Ihr Programm , was zu tun , wenn die Berechnung abgeschlossen.

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

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

Dies wird als CPS bezeichnet . Grundsätzlich übergeben wir getFiveeine Aktion, die ausgeführt werden soll, wenn sie abgeschlossen ist. Wir teilen unserem Code mit, wie er reagieren soll, wenn ein Ereignis abgeschlossen ist (wie unser AJAX-Aufruf oder in diesem Fall das Timeout).

Verwendung wäre:

getFive(onComplete);

Welches sollte "5" auf dem Bildschirm alarmieren. (Geige) .

Mögliche Lösungen

Grundsätzlich gibt es zwei Möglichkeiten, dies zu lösen:

1. Machen Sie den AJAX-Aufruf synchron (nennen wir ihn SJAX).
2. Restrukturieren Sie Ihren Code so, dass er ordnungsgemäß mit Rückrufen funktioniert.

1. Synchroner AJAX - Tu es nicht !!

Was synchrones AJAX betrifft, tun Sie es nicht! Felix 'Antwort wirft einige überzeugende Argumente dafür auf, warum es eine schlechte Idee ist. Zusammenfassend lässt sich sagen, dass der Browser des Benutzers eingefroren wird, bis der Server die Antwort zurückgibt und eine sehr schlechte Benutzererfahrung erzeugt. Hier ist eine weitere kurze Zusammenfassung von MDN, warum:

XMLHttpRequest unterstützt sowohl synchrone als auch asynchrone Kommunikation. Im Allgemeinen sollten jedoch aus Leistungsgründen asynchrone Anforderungen synchronen Anforderungen vorgezogen werden.

Kurz gesagt, synchrone Anforderungen blockieren die Ausführung von Code ... ... dies kann schwerwiegende Probleme verursachen ...

Wenn Sie es tun müssen, können Sie eine Flagge übergeben: So geht's:

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 umstrukturieren

Lassen Sie Ihre Funktion einen Rückruf annehmen. Im Beispiel fookann Code verwendet werden, um einen Rückruf anzunehmen. Wir werden unseren Code erzählen , wie man reagieren , wenn fooabgeschlossen ist .

Damit:

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

Wird:

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

Hier haben wir eine anonyme Funktion übergeben, aber wir könnten genauso gut einen Verweis auf eine vorhandene Funktion übergeben, sodass es so aussieht:

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

Weitere Informationen dazu, wie diese Art von Rückrufdesign ausgeführt wird, finden Sie in Felix 'Antwort.

Definieren wir nun foo selbst, um entsprechend zu handeln

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

(Geige)

Wir haben jetzt unsere foo-Funktion dazu gebracht, eine Aktion zu akzeptieren, die ausgeführt werden soll, wenn der AJAX erfolgreich abgeschlossen wurde. Wir können dies weiter erweitern, indem wir prüfen, ob der Antwortstatus nicht 200 ist, und entsprechend handeln (einen Fail-Handler erstellen und so weiter). Wir lösen unser Problem effektiv.

Wenn Sie immer noch Schwierigkeiten haben, dies zu verstehen, lesen Sie den AJAX-Leitfaden für die ersten Schritte bei MDN.

XMLHttpRequest 2 (lesen Sie zuerst die Antworten von Benjamin Gruenbaum & Felix Kling )

Wenn Sie jQuery nicht verwenden und eine schöne kurze XMLHttpRequest 2 möchten, die auf den modernen Browsern und auch auf den mobilen Browsern funktioniert, empfehle ich, sie folgendermaßen zu verwenden:

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

Wie du siehst:

1. Es ist kürzer als alle anderen aufgelisteten Funktionen.
2. Der Rückruf wird direkt eingestellt (also keine zusätzlichen unnötigen Schließungen).
3. Es verwendet die neue Onload (sodass Sie nicht nach dem Readystate &&-Status suchen müssen).
4. Es gibt einige andere Situationen, an die ich mich nicht erinnere, die XMLHttpRequest 1 nerven.

Es gibt zwei Möglichkeiten, um die Antwort auf diesen Ajax-Aufruf zu erhalten (drei mit dem Variablennamen XMLHttpRequest):

Das einfachste:

this.response

Oder wenn Sie aus irgendeinem Grund bind()den Rückruf zu einer Klasse:

e.target.response

Beispiel:

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

Oder (die obige ist besser, anonyme Funktionen sind immer ein Problem):

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

Nichts einfacher.

Jetzt werden einige Leute wahrscheinlich sagen, dass es besser ist, onreadystatechange oder sogar den Variablennamen XMLHttpRequest zu verwenden. Das ist falsch.

Schauen Sie sich die erweiterten Funktionen von XMLHttpRequest an

Es werden alle * modernen Browser unterstützt. Und ich kann bestätigen, dass ich diesen Ansatz verwende, da XMLHttpRequest 2 vorhanden ist. Ich hatte nie Probleme mit allen von mir verwendeten Browsern.

onreadystatechange ist nur nützlich, wenn Sie die Header in Status 2 erhalten möchten.

Die Verwendung des XMLHttpRequestVariablennamens ist ein weiterer großer Fehler, da Sie den Rückruf innerhalb der Onload / oreadystatechange-Verschlüsse ausführen müssen, sonst haben Sie ihn verloren.

Wenn Sie nun mit post und FormData etwas Komplexeres möchten, können Sie diese Funktion ganz einfach erweitern:

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

Wieder ... es ist eine sehr kurze Funktion, aber es wird & postet.

Anwendungsbeispiele:

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

Oder übergeben Sie ein vollständiges Formularelement ( document.getElementsByTagName('form')[0]):

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

Oder legen Sie einige benutzerdefinierte Werte fest:

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

Wie Sie sehen, habe ich die Synchronisierung nicht implementiert ... es ist eine schlechte Sache.

Trotzdem ... warum nicht einfach?

Wie im Kommentar erwähnt, bricht die Verwendung von error && synchronous den Punkt der Antwort vollständig. Welches ist eine schöne kurze Möglichkeit, Ajax richtig einzusetzen?

Fehlerbehandlungsroutine

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

Im obigen Skript haben Sie eine Fehlerbehandlungsroutine, die statisch definiert ist, damit die Funktion nicht beeinträchtigt wird. Der Fehlerbehandler kann auch für andere Funktionen verwendet werden.

Um einen Fehler wirklich zu beheben, müssen Sie nur eine falsche URL schreiben. In diesem Fall gibt jeder Browser einen Fehler aus.

Fehlerbehandlungsroutinen sind möglicherweise nützlich, wenn Sie benutzerdefinierte Header festlegen, den responseType auf Blob-Array-Puffer setzen oder was auch immer ...

Selbst wenn Sie 'POSTAPAPAP' als Methode übergeben, wird kein Fehler ausgegeben.

Selbst wenn Sie 'fdggdgilfdghfldj' als Formdaten übergeben, wird kein Fehler ausgegeben.

Im ersten Fall ist der Fehler in der displayAjax()unter this.statusTextwie Method not Allowed.

Im zweiten Fall funktioniert es einfach. Sie müssen auf der Serverseite prüfen, ob Sie die richtigen Postdaten übergeben haben.

domänenübergreifend nicht erlaubt löst automatisch einen Fehler aus.

In der Fehlerantwort gibt es keine Fehlercodes.

Es gibt nur das, this.typewas auf Fehler gesetzt ist.

Warum einen Fehlerbehandler hinzufügen, wenn Sie keine Kontrolle über Fehler haben? Die meisten Fehler werden in der Rückruffunktion zurückgegeben displayAjax().

Also: Keine Notwendigkeit für Fehlerprüfungen, wenn Sie die URL richtig kopieren und einfügen können. ;)

PS: Als ersten Test habe ich x ('x', displayAjax) geschrieben ... und es hat total eine Antwort bekommen ... ??? Also habe ich den Ordner überprüft, in dem sich der HTML-Code befindet, und es gab eine Datei namens 'x.xml'. Selbst wenn Sie die Erweiterung Ihrer Datei vergessen, wird XMLHttpRequest 2 sie finden . Ich habe laut gelacht

Lesen Sie eine Datei synchron

Tu das nicht.

Wenn Sie den Browser für eine Weile blockieren möchten, laden Sie eine schöne große .txtDatei synchron.

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

Jetzt können Sie tun

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

Es gibt keine andere Möglichkeit, dies nicht asynchron zu tun. (Ja, mit setTimeout-Schleife ... aber im Ernst?)

Ein weiterer Punkt ist ... wenn Sie mit APIs oder nur den Dateien Ihrer eigenen Liste arbeiten oder was auch immer Sie immer unterschiedliche Funktionen für jede Anfrage verwenden ...

Nur wenn Sie eine Seite haben, auf der Sie immer das gleiche XML / JSON laden oder was auch immer Sie nur eine Funktion benötigen. Ändern Sie in diesem Fall die Ajax-Funktion ein wenig und ersetzen Sie b durch Ihre spezielle Funktion.

Die oben genannten Funktionen dienen der grundlegenden Verwendung.

Wenn Sie die Funktion erweitern möchten ...

Ja, du kannst.

Ich verwende viele APIs und eine der ersten Funktionen, die ich in jede HTML-Seite integriere, ist die erste Ajax-Funktion in dieser Antwort, nur mit GET ...

Mit XMLHttpRequest 2 können Sie jedoch eine Menge Dinge tun:

Ich habe einen Download-Manager (mit Bereichen auf beiden Seiten mit Resume, Filereader, Dateisystem) erstellt, verschiedene Image Resizer-Konverter mit Canvas, Web-SQL-Datenbanken mit base64images und vielem mehr ... Aber in diesen Fällen sollten Sie nur dafür eine Funktion erstellen Zweck ... manchmal benötigen Sie einen Blob, Array-Puffer, Sie können Header setzen, Mimetyp überschreiben und es gibt noch viel mehr ...

Aber die Frage hier ist, wie man eine Ajax-Antwort zurückgibt ... (Ich habe einen einfachen Weg hinzugefügt.)

Wenn Sie Versprechen verwenden, ist diese Antwort für Sie.

Dies bedeutet AngularJS, jQuery (mit verzögertem Zugriff), das Ersetzen (Abrufen) von nativem XHR, EmberJS, das Speichern von BackboneJS oder jede Knotenbibliothek, die Versprechen zurückgibt.

Ihr Code sollte ungefähr so ​​aussehen:

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 hat gute Arbeit geleistet und eine Antwort für Leute geschrieben, die jQuery mit Rückrufen für AJAX verwenden. Ich habe eine Antwort für native XHR. Diese Antwort gilt für die generische Verwendung von Versprechungen im Frontend oder Backend.

Das Kernthema

Das JavaScript-Parallelitätsmodell im Browser und auf dem Server mit NodeJS / io.js ist asynchron und reaktiv .

Wenn Sie eine Methode aufrufen, die ein Versprechen zurückgibt, werden die thenHandler immer asynchron ausgeführt, dh nach dem Code unter ihnen, der sich nicht in einem .thenHandler befindet.

Dies bedeutet, dass datader von thenIhnen definierte Handler bei der Rückgabe noch nicht ausgeführt wurde. Dies bedeutet wiederum, dass der von Ihnen zurückgegebene Wert nicht rechtzeitig auf den richtigen Wert eingestellt wurde.

Hier ist eine einfache Analogie für das Problem:

    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

Der Wert von dataist, undefinedda das data = 5Teil noch nicht ausgeführt wurde. Es wird wahrscheinlich in einer Sekunde ausgeführt, ist aber zu diesem Zeitpunkt für den zurückgegebenen Wert irrelevant.

Da der Vorgang noch nicht ausgeführt wurde (AJAX, Serveraufruf, E / A, Timer), geben Sie den Wert zurück, bevor die Anforderung die Möglichkeit erhielt, Ihrem Code den Wert mitzuteilen.

Eine mögliche Lösung für dieses Problem ist es , Code wieder aktiv , erzählen Sie Ihr Programm , was zu tun , wenn die Berechnung abgeschlossen. Versprechen ermöglichen dies aktiv, indem sie zeitlicher (zeitkritischer) Natur sind.

Schnelle Zusammenfassung der Versprechen

Ein Versprechen ist ein Wert im Laufe der Zeit . Versprechen haben Status, sie beginnen als ausstehend ohne Wert und können sich mit Folgendem abfinden:

• erfüllt bedeutet, dass die Berechnung erfolgreich abgeschlossen wurde.
• abgelehnt, was bedeutet, dass die Berechnung fehlgeschlagen ist.

Ein Versprechen kann den Zustand nur einmal ändern, danach bleibt es für immer im selben Zustand. Sie können thenHandler an Versprechen anhängen , um deren Wert zu extrahieren und Fehler zu behandeln. thenHandler ermöglichen die Verkettung von Anrufen. Versprechen werden mithilfe von APIs erstellt, die sie zurückgeben . Zum Beispiel der modernere AJAX-Ersatz fetchoder die $.getRückkehr von jQuery .

Wenn wir rufen .thenauf ein Versprechen und Rückkehr etwas von ihm - wir ein Versprechen für bekommen den verarbeiteten Wert . Wenn wir ein weiteres Versprechen zurückgeben, werden wir erstaunliche Dinge bekommen, aber lassen Sie uns unsere Pferde halten.

Mit Versprechungen

Mal sehen, wie wir das oben genannte Problem mit Versprechungen lösen können. Lassen Sie uns zunächst unser Verständnis der Versprechen von oben demonstrieren, indem wir den Versprechen-Konstruktor zum Erstellen einer Verzögerungsfunktion verwenden:

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

Nachdem wir setTimeout so konvertiert haben, dass es Versprechen verwendet, können wir es verwenden then, damit es zählt:

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

Grundsätzlich statt einer Rückkehr Wert , den wir nicht wegen der Gleichzeitigkeit Modell tun - wir Rückkehr einen Wrapper für einen Wert , dass wir auspacken mit then. Es ist wie eine Schachtel, mit der man öffnen kann then.

Dies anwenden

Dies gilt auch für Ihren ursprünglichen API-Aufruf. Sie können:

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

Das funktioniert also genauso gut. Wir haben gelernt, dass wir keine Werte von bereits asynchronen Aufrufen zurückgeben können, aber wir können Versprechen verwenden und sie verketten, um die Verarbeitung durchzuführen. Wir wissen jetzt, wie die Antwort von einem asynchronen Aufruf zurückgegeben wird.

ES2015 (ES6)

ES6 führt Generatoren ein , Funktionen, die in der Mitte zurückkehren und dann den Punkt wieder aufnehmen können, an dem sie sich befanden. Dies ist normalerweise nützlich für Sequenzen, zum Beispiel:

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

Ist eine Funktion, die einen Iterator über die Sequenz zurückgibt 1,2,3,3,3,3,...., der iteriert werden kann. Während dies für sich genommen interessant ist und Raum für viele Möglichkeiten eröffnet, gibt es einen besonders interessanten Fall.

Wenn es sich bei der von uns erstellten Sequenz eher um eine Sequenz von Aktionen als um Zahlen handelt, können wir die Funktion anhalten, wenn eine Aktion ausgeführt wird, und darauf warten, bevor wir die Funktion fortsetzen. Anstelle einer Folge von Zahlen brauchen wir also eine Folge zukünftiger Werte - das heißt: Versprechen.

Mit diesem etwas kniffligen, aber sehr mächtigen Trick können wir asynchronen Code synchron schreiben. Es gibt mehrere "Läufer", die dies für Sie tun. Das Schreiben einer ist ein paar kurze Codezeilen, die jedoch den Rahmen dieser Antwort sprengen. Ich werde hier Bluebirds verwenden Promise.coroutine, aber es gibt andere Wrapper wie cooder 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
});

Diese Methode gibt selbst ein Versprechen zurück, das wir von anderen Coroutinen konsumieren können. Zum Beispiel:

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)

In ES7 ist dies weiter standardisiert, es gibt derzeit mehrere Vorschläge, aber in allen können Sie awaitversprechen. Dies ist nur "Zucker" (schönere Syntax) für den obigen ES6-Vorschlag durch Hinzufügen der Schlüsselwörter asyncund await. Machen Sie das obige Beispiel:

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
}

Es gibt trotzdem ein Versprechen zurück :)

Sie verwenden Ajax falsch. Die Idee ist, dass nichts zurückgegeben wird, sondern die Daten an eine sogenannte Rückruffunktion übergeben werden, die die Daten verarbeitet.

Das ist:

function handleData( responseData ) {

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

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

Wenn Sie etwas im Submit-Handler zurückgeben, wird nichts ausgeführt. Sie müssen stattdessen entweder die Daten übergeben oder direkt in der Erfolgsfunktion damit tun, was Sie wollen.

Die einfachste Lösung besteht darin, eine JavaScript-Funktion zu erstellen und für den Ajax- successRückruf aufzurufen .

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

Ich werde mit einem schrecklich aussehenden, handgezeichneten Comic antworten. Das zweite Bild ist der Grund , warum resultist undefinedin Ihrem Codebeispiel.

Angular1

Für Menschen, die AngularJS verwenden , kann diese Situation mit umgehen Promises.

Hier heißt es:

Versprechen können verwendet werden, um asynchrone Funktionen zu entschlüsseln, und ermöglichen es, mehrere Funktionen miteinander zu verketten.

Sie können eine schöne Erklärung finden hier auch.

Beispiel in den unten genannten Dokumenten .

  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 und höher

In Angular2mit Blick auf das folgende Beispiel, aber seine empfohlen zu Verwendung Observablesmit Angular2.

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

}}

Sie können das auf diese Weise konsumieren,

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

Siehe den Originalbeitrag hier. Typescript unterstützt jedoch keine nativen es6-Versprechen . Wenn Sie es verwenden möchten, benötigen Sie möglicherweise ein Plugin dafür.

Außerdem ist hier die Versprechen SPEC hier definieren.

Die meisten Antworten hier geben nützliche Vorschläge, wenn Sie eine einzelne asynchrone Operation ausführen. Manchmal tritt dies jedoch auf, wenn Sie für jeden Eintrag in einem Array oder einer anderen listenartigen Struktur eine asynchrone Operation ausführen müssen . Die Versuchung ist, dies zu tun:

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

Beispiel:

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

Der Grund, der nicht funktioniert, ist, dass die Rückrufe von doSomethingAsyncnoch nicht ausgeführt wurden, als Sie versuchen, die Ergebnisse zu verwenden.

Wenn Sie also ein Array (oder eine Liste) haben und für jeden Eintrag asynchrone Operationen ausführen möchten, haben Sie zwei Möglichkeiten: Führen Sie die Operationen parallel (überlappend) oder in Reihe (nacheinander nacheinander) aus.

Parallel

Sie können alle starten und verfolgen, wie viele Rückrufe Sie erwarten, und dann die Ergebnisse verwenden, wenn Sie so viele Rückrufe erhalten haben:

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

Beispiel:

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

(Wir könnten abschaffen expectingund nur verwenden results.length === theArray.length, aber das lässt uns offen für die Möglichkeit, theArraydie geändert wird, während die Anrufe ausstehen ...)

Beachten Sie, wie wir das indexfrom verwenden forEach, um das Ergebnis an resultsderselben Position wie den Eintrag zu speichern, auf den es sich bezieht, auch wenn die Ergebnisse nicht in der richtigen Reihenfolge eintreffen (da asynchrone Aufrufe nicht unbedingt in der Reihenfolge abgeschlossen werden müssen, in der sie gestartet wurden).

Aber was , wenn Sie brauchen , um zurückzukehren diese Ergebnisse aus einer Funktion? Wie die anderen Antworten gezeigt haben, können Sie nicht; Ihre Funktion muss einen Rückruf annehmen und zurückrufen (oder ein Versprechen zurückgeben ). Hier ist eine Rückrufversion:

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

Beispiel:

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

Oder hier ist eine Version, die Promisestattdessen a zurückgibt:

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

Wenn doSomethingAsyncuns Fehler übergeben werden, rejectlehnen wir das Versprechen natürlich ab, wenn wir einen Fehler erhalten.)

Beispiel:

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

(Alternativ können Sie auch einen Wrapper erstellen doSomethingAsync, der ein Versprechen zurückgibt, und dann die folgenden Schritte ausführen ...)

Wenn doSomethingAsyncSie ein Versprechen erhalten , können Sie Folgendes verwenden Promise.all:

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

Wenn Sie wissen, doSomethingAsyncdass ein zweites und ein drittes Argument ignoriert werden, können Sie es direkt an übergeben map( mapruft den Rückruf mit drei Argumenten auf, aber die meisten Leute verwenden meistens nur das erste):

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

Beispiel:

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

Beachten Sie, dass Promise.alldas Versprechen mit einer Reihe von Ergebnissen aller Versprechen aufgelöst wird, die Sie ihm geben, wenn sie alle gelöst sind, oder das Versprechen ablehnt, wenn das erste der Versprechen, die Sie ihm geben, abgelehnt wird.

Serie

Angenommen, Sie möchten nicht, dass die Operationen parallel ablaufen? Wenn Sie sie nacheinander ausführen möchten, müssen Sie warten, bis jeder Vorgang abgeschlossen ist, bevor Sie mit dem nächsten beginnen. Hier ist ein Beispiel für eine Funktion, die dies tut und einen Rückruf mit dem Ergebnis aufruft:

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

(Da wir die Arbeit in Serie results.push(result)ausführen , können wir sie nur verwenden, da wir wissen, dass wir keine fehlerhaften Ergebnisse erzielen. Oben hätten wir sie verwenden können results[index] = result;, aber in einigen der folgenden Beispiele haben wir keinen Index benutzen.)

Beispiel:

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

(Oder bauen Sie erneut einen Wrapper doSomethingAsync, der Ihnen ein Versprechen gibt, und führen Sie die folgenden Schritte aus ...)

Wenn doSomethingAsyncSie ein Versprechen erhalten, wenn Sie die ES2017 + -Syntax verwenden können (möglicherweise mit einem Transpiler wie Babel ), können Sie eine asyncFunktion mit for-ofund verwenden 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);
});

Beispiel:

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

Wenn Sie die ES2017 + -Syntax (noch) nicht verwenden können, können Sie eine Variation des Musters "Versprechen reduzieren" verwenden (dies ist komplexer als das übliche Versprechen reduzieren, da wir das Ergebnis nicht von einem zum nächsten weitergeben, sondern stattdessen Sammeln ihrer Ergebnisse in einem Array):

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

Beispiel:

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

... was mit ES2015 + Pfeilfunktionen weniger umständlich ist :

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

Beispiel:

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

Schauen Sie sich dieses Beispiel an:

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

Wie Sie sehen können, getJokewird ein gelöstes Versprechen zurückgegeben (es wird bei der Rückkehr gelöst res.data.value). Sie warten also, bis die Anforderung $ http.get abgeschlossen ist, und führen dann console.log (res.joke) aus (als normaler asynchroner Ablauf).

Dies ist die plnkr:

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

ES6 Weg (asynchron - warten)

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

Dies ist einer der Orte, an denen Datenbindungs- oder Speicherkonzepte auf zwei Arten , die in vielen neuen JavaScript-Frameworks verwendet werden, für Sie hervorragend geeignet sind ...

Wenn Sie also Angular, React oder ein anderes Framework verwenden, das Datenbindungs- oder Speicherkonzepte auf zwei Arten ausführt , wird dieses Problem einfach für Sie behoben. Kurz gesagt, Ihr Ergebnis befindet sich undefinedin der ersten Phase, sodass Sie es erhalten, result = undefinedbevor Sie das erhalten Daten, sobald Sie das Ergebnis erhalten, werden sie aktualisiert und dem neuen Wert zugewiesen, der auf Ihren Ajax-Aufruf reagiert ...

Aber wie können Sie es zum Beispiel in reinem Javascript oder jQuery machen, wie Sie in dieser Frage gefragt haben?

Sie können einen Rückruf , ein Versprechen und eine kürzlich beobachtbare Funktion verwenden , um dies für Sie zu erledigen. Beispielsweise haben wir in Versprechungen eine Funktion wie success()oder, then()die ausgeführt wird, wenn Ihre Daten für Sie bereit sind, ebenso wie die Rückruf- oder Abonnementfunktion für beobachtbar .

In Ihrem Fall, in dem Sie jQuery verwenden , können Sie beispielsweise Folgendes tun:

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

Weitere Informationen finden Sie in den Versprechungen und Observablen, die neuere Methoden für diese asynchronen Aufgaben darstellen.

Es ist ein sehr häufiges Problem, mit dem wir konfrontiert sind, wenn wir mit den "Geheimnissen" von JavaScript kämpfen. Lassen Sie mich heute versuchen, dieses Rätsel zu entmystifizieren.

Beginnen wir mit einer einfachen JavaScript-Funktion:

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

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

Dies ist ein einfacher synchroner Funktionsaufruf (bei dem jede Codezeile vor der nächsten nacheinander mit ihrem Job "fertig" ist) und das Ergebnis das gleiche wie erwartet ist.

Fügen wir nun ein wenig Twist hinzu, indem wir unsere Funktion geringfügig verzögern, damit nicht alle Codezeilen nacheinander "fertig" sind. Somit wird das asynchrone Funktionsverhalten emuliert:

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

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

Also los, diese Verzögerung hat gerade die Funktionalität gebrochen, die wir erwartet hatten! Aber was genau ist passiert? Nun, es ist eigentlich ziemlich logisch, wenn man sich den Code ansieht. Die Funktion foo()gibt bei der Ausführung nichts zurück (der zurückgegebene Wert ist also undefined), startet jedoch einen Timer, der eine Funktion nach 1s ausführt, um 'wohoo' zurückzugeben. Aber wie Sie sehen können, ist der Wert, der bar zugewiesen wird, das sofort zurückgegebene Material von foo (), was nichts anderes ist als gerecht undefined.

Wie gehen wir dieses Problem an?

Fragen wir unsere Funktion nach einem VERSPRECHEN . Bei Promise geht es wirklich darum, was es bedeutet: Es bedeutet, dass die Funktion Ihnen garantiert, dass Sie jede Ausgabe liefern, die es in Zukunft erhält. Lassen Sie es uns für unser kleines Problem oben in Aktion sehen:

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

Die Zusammenfassung lautet also: Um die asynchronen Funktionen wie Ajax-basierte Aufrufe usw. anzugehen, können Sie ein Versprechen für resolveden Wert verwenden (den Sie zurückgeben möchten). Kurz gesagt, Sie lösen den Wert in asynchronen Funktionen auf , anstatt ihn zurückzugeben .

UPDATE (Versprechen mit Async / Warten)

Neben der Verwendung then/catchzur Arbeit mit Versprechungen gibt es noch einen weiteren Ansatz. Die Idee ist, eine asynchrone Funktion zu erkennen und dann auf die Auflösung der Versprechen zu warten , bevor mit der nächsten Codezeile fortgefahren wird. Es ist immer noch nur promisesunter der Haube, aber mit einem anderen syntaktischen Ansatz. Um die Dinge klarer zu machen, finden Sie unten einen Vergleich:

dann / catch Version:

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

asynchrone / warte Version:

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

Ein anderer Ansatz, um einen Wert von einer asynchronen Funktion zurückzugeben, besteht darin, ein Objekt zu übergeben, das das Ergebnis der asynchronen Funktion speichert.

Hier ist ein Beispiel dafür:

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

Ich verwende das resultObjekt, um den Wert während der asynchronen Operation zu speichern. Dadurch ist das Ergebnis auch nach dem asynchronen Job verfügbar.

Ich benutze diesen Ansatz oft. Mich würde interessieren, wie gut dieser Ansatz funktioniert, wenn das Ergebnis über aufeinanderfolgende Module zurückverdrahtet wird.

Während Versprechen und Rückrufe in vielen Situationen gut funktionieren, ist es ein Problem, etwas auszudrücken wie:

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

Sie würden am Ende durchgehen async1; Überprüfen Sie, ob nameundefiniert ist oder nicht, und rufen Sie den Rückruf entsprechend auf.

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

async1(name, async2)

Während es in kleinen Beispielen in Ordnung ist, wird es ärgerlich, wenn Sie viele ähnliche Fälle und Fehlerbehandlungen haben.

Fibers hilft bei der Lösung des Problems.

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
}

Sie können das Projekt hier auschecken .

Das folgende Beispiel, das ich geschrieben habe, zeigt, wie es geht

• Asynchrone HTTP-Aufrufe verarbeiten;
• Warten Sie auf die Antwort von jedem API-Aufruf.
• Verwenden Sie das Versprechungsmuster .
• Verwenden Sie das Promise.all- Muster, um mehrere HTTP-Aufrufe zu verbinden.

Dieses Arbeitsbeispiel ist in sich geschlossen. Es wird ein einfaches Anforderungsobjekt definiert, das das Fensterobjekt XMLHttpRequestzum Tätigen von Anrufen verwendet. Es wird eine einfache Funktion definiert, mit der darauf gewartet werden kann, dass eine Reihe von Versprechungen erfüllt werden.

Kontext. In diesem Beispiel wird der Spotify-Web-API- Endpunkt playlistabgefragt , um nach Objekten für einen bestimmten Satz von Abfragezeichenfolgen zu suchen :

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

Für jedes Element löst ein neues Versprechen einen Block aus ExecutionBlock. Analysieren Sie das Ergebnis, planen Sie einen neuen Satz von Versprechen basierend auf dem Ergebnisarray, dh einer Liste von Spotify- userObjekten, und führen Sie den neuen HTTP-Aufruf innerhalb des ExecutionProfileBlockasynchronen Versuchs aus.

Sie können dann eine verschachtelte Promise-Struktur sehen, mit der Sie mehrere und vollständig asynchrone verschachtelte HTTP-Aufrufe erzeugen und die Ergebnisse aus jeder Teilmenge von Aufrufen zusammenführen können Promise.all.

HINWEIS Für neuere Spotify- searchAPIs muss ein Zugriffstoken in den Anforderungsheadern angegeben werden:

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

Um das folgende Beispiel auszuführen, müssen Sie Ihr Zugriffstoken in die Anforderungsheader einfügen:

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" />

Ich habe diese Lösung hier ausführlich besprochen .

Die kurze Antwort lautet: Sie müssen einen Rückruf wie folgt implementieren:

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

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

Antwort 2017: Sie können jetzt in jedem aktuellen Browser und Knoten genau das tun, was Sie wollen

Das ist ganz einfach:

• Geben Sie ein Versprechen zurück
• Verwenden Sie das 'Warten' , das JavaScript anweist, auf das Versprechen zu warten, das in einen Wert aufgelöst werden soll (wie die HTTP-Antwort).
• Fügen Sie der übergeordneten Funktion das Schlüsselwort 'async' hinzu

Hier ist eine funktionierende Version Ihres Codes:

(async function(){

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

})()

Warten wird in allen aktuellen Browsern und Knoten 8 unterstützt

Js ist ein Single-Threaded.

Der Browser kann in drei Teile unterteilt werden:

1) Ereignisschleife

2) Web-API

3) Ereigniswarteschlange

Die Ereignisschleife wird für immer ausgeführt, dh für eine Art Endlosschleife. In der Ereigniswarteschlange werden alle Ihre Funktionen auf ein Ereignis verschoben (Beispiel: Klicken). Dies wird einzeln aus der Warteschlange ausgeführt und in die Ereignisschleife gestellt, die diese Funktion ausführt und selbst vorbereitet Dies bedeutet, dass die Ausführung einer Funktion erst beginnt, wenn die Funktion, bevor sie sich in der Warteschlange befindet, in der Ereignisschleife ausgeführt wird.

Nehmen wir nun an, wir haben zwei Funktionen in eine Warteschlange verschoben. Eine dient zum Abrufen von Daten vom Server und eine andere verwendet diese Daten. Wir haben zuerst die Funktion serverRequest () in die Warteschlange gestellt und dann die Funktion useData () verwendet. Die Funktion serverRequest geht in die Ereignisschleife und ruft den Server auf, da wir nie wissen, wie viel Zeit erforderlich ist, um Daten vom Server abzurufen. Daher wird erwartet, dass dieser Prozess einige Zeit in Anspruch nimmt, und wir beschäftigen unsere Ereignisschleife, sodass unsere Seite hängt. Dort hängt das Web Die API kommt in die Rolle, indem sie diese Funktion aus der Ereignisschleife übernimmt und sich mit dem Server befasst, der die Ereignisschleife frei macht, damit wir die nächste Funktion aus der Warteschlange ausführen können. Die nächste Funktion in der Warteschlange ist utiliseData (), die in die Schleife geht, aber da keine Daten verfügbar sind Verschwendung und Ausführung der nächsten Funktion werden bis zum Ende der Warteschlange fortgesetzt. (Dies wird als Async-Aufruf bezeichnet, dh wir können etwas anderes tun, bis wir Daten erhalten.)

Angenommen, unsere Funktion serverRequest () hatte eine return-Anweisung in einem Code. Wenn wir Daten von der Server-Web-API zurückerhalten, werden sie am Ende der Warteschlange in die Warteschlange gestellt. Da es am Ende in die Warteschlange verschoben wird, können wir seine Daten nicht verwenden, da in unserer Warteschlange keine Funktion mehr zum Verwenden dieser Daten vorhanden ist. Daher ist es nicht möglich, etwas von Async Call zurückzugeben.

Die Lösung hierfür ist also ein Rückruf oder Versprechen .

Ein Bild aus einer der Antworten hier, erklärt die Verwendung von Rückrufen korrekt ... Wir geben unsere Funktion (Funktion unter Verwendung der vom Server zurückgegebenen Daten) an den aufrufenden Server weiter.

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

}

In meinem Code heißt es als

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

Rückruf von Javscript.info

Sie können diese benutzerdefinierte Bibliothek (geschrieben mit Promise) verwenden, um einen Remote-Anruf zu tätigen.

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

Einfaches Verwendungsbeispiel:

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

Eine andere Lösung besteht darin, Code über den sequentiellen Executor nsynjs auszuführen .

Wenn die zugrunde liegende Funktion versprochen ist

nsynjs wertet alle Versprechen nacheinander aus und legt das Versprechen-Ergebnis in die dataEigenschaft:

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>

Wenn die zugrunde liegende Funktion nicht versprochen wird

Schritt 1. Wrap-Funktion mit Rückruf in nsynjs-fähigen Wrapper (wenn die Version versprochen ist, können Sie diesen Schritt überspringen):

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;