Wie gebe ich die Antwort eines asynchronen Aufrufs?
Habe ich eine Funktion foo
wodurch ein Ajax-request. Wie kann ich wieder die Antwort von foo
?
Ich habe versucht, die Rückgabe der Wert aus der success
Rückruf sowie die Zuordnung der Antwort auf eine lokale variable innerhalb der Funktion und der Rückkehr, dass man, aber keiner dieser Wege tatsächlich die Antwort zurückgegeben wird.
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`.
Für ein einfaches intro Verspricht, kann dies ein guter read: devopedia.org/promises
[Ich war vor dem gleichen problem der asynchronen Aufruf mit axios und js, aber es ist nicht empfehlenswert, eine synchron-Funktion, es funktioniert für bestimmte Situationen. ](stackoverflow.com/questions/55239719/...)
Sie können nicht machen Sie arbeiten, wie Sie wollen. obwohl async/await funktionieren würde. es ist wieder Versprechen basiert
[Ich war vor dem gleichen problem der asynchronen Aufruf mit axios und js, aber es ist nicht empfehlenswert, eine synchron-Funktion, es funktioniert für bestimmte Situationen. ](stackoverflow.com/questions/55239719/...)
Sie können nicht machen Sie arbeiten, wie Sie wollen. obwohl async/await funktionieren würde. es ist wieder Versprechen basiert
InformationsquelleAutor Felix Kling | 2013-01-08
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem
Den Eine in Ajax steht für asynchron . Das bedeutet, dass das senden der Anfrage (oder eher das empfangen der Antwort) aus der normalen Ausführung fließen. In deinem Beispiel
$.ajax
sofort zurückkehrt und die nächste Anweisungreturn result;
, der ausgeführt wird, bevor die Funktion, die Sie übergeben, wiesuccess
Rückruf wurde auch genannt.Hier ist eine Analogie, die hoffentlich macht der Unterschied zwischen synchron-und asynchron-flow klarer:
Synchrone
Stellen Sie sich vor Sie rufen einen Freund an und bitten ihn, dass er sich etwas für Sie. Obwohl es eine Weile dauern könnte, Sie am Telefon zu warten und starren in den Raum, bis Ihr Freund gibt Sie die Antwort, die Sie brauchte.
Dasselbe geschieht, wenn Sie eine Funktion aufrufen, die "normalen" code:
Obwohl
findItem
eine lange Zeit dauern, um auszuführen, beliebigen code kommt nachvar item = findItem();
hat warten, bis die Funktion gibt das Ergebnis zurück.Asynchrone
Rufen Sie Ihren Freund wieder aus dem gleichen Grund. Aber dieses mal, sagen Sie ihm, dass Sie in Eile sind, und er sollte rufen Sie zurück auf Ihrem Handy. Sie auflegen, das Haus verlassen und das tun, was Sie zu tun geplant. Sobald Ihr Freund ruft Sie zurück, Sie sind den Umgang mit den Informationen, die er Euch schenkte.
Das ist genau das, was passiert, wenn Sie einen Ajax-request.
Anstatt zu warten, für die Reaktion, wird die Ausführung fortgesetzt, sofort, und die Anweisung nach dem Ajax-Aufruf ausgeführt wird. Auf die Antwort, die schließlich, stellen Sie eine Funktion, die aufgerufen werden, sobald die Antwort empfangen wurde, ist ein Rückruf (etwas bemerken? Rückruf ?). Jede Anweisung kommt, nachdem dieser Aufruf ausgeführt wird, bevor der callback wird aufgerufen.
Lösung(en)
Umarmen die asynchrone Natur von JavaScript! Während bestimmte asynchrone Operationen liefern synchronen Pendants (also nicht "Ajax"), es ist generell abzuraten, Sie zu verwenden, insbesondere in einem browser-Kontext.
Warum ist es schlecht, fragst du?
JavaScript läuft im UI-thread des Browsers und lang andauernde Prozess wird sperren Sie die Benutzeroberfläche, so dass es nicht mehr reagiert. Zusätzlich gibt es eine Obere Grenze für die Ausführungszeit für JavaScript und der browser fragt den Benutzer, ob Sie fortfahren der Ausführung oder nicht.
All dies ist wirklich schlechte user experience. Die Benutzer werden nicht in der Lage zu sagen, ob alles funktioniert oder nicht. Darüber hinaus wird die Wirkung schlechter sein wird für Nutzer mit einer langsamen Internetverbindung.
Im folgenden betrachten wir drei verschiedene Lösungen, die alle Gebäude auf der jeweils anderen:
async/await
(ES2017+, verfügbar in älteren Browsern, wenn Sie einen transpiler oder regenerator)then()
(ES2015+, verfügbar in älteren Browsern, wenn Sie eines der vielen Versprechen, Bibliotheken)Alle drei sind in aktuellen Browsern, und Knoten 7+.
ES2017+: Verspricht mit
async/await
Den ECMAScript-version veröffentlicht, im Jahr 2017 eingeführt syntax-level-support für asynchrone Funktionen. Mit Hilfe von
async
undawait
Sie schreiben kann asynchron in einem "synchronen Stil". Der code ist immer noch asynchron, aber es ist einfacher zu Lesen/verstehen.async/await
baut auf Versprechungen: einasync
- Funktion gibt immer ein Versprechen.await
"packt" ein Versprechen und resultieren entweder in den Wert der Versprechen wurde behoben, mit oder wirft einen Fehler aus, wenn das Versprechen wurde abgelehnt.Wichtig: können Sie nur verwenden
await
innerhalb einerasync
Funktion. Gerade jetzt, die top-level -await
noch nicht unterstützt, so haben Sie, um eine async-IIFE (Sofort Aufgerufene Funktion Ausdruck) zum starten einerasync
Kontext.Lesen Sie mehr über
async
underwarten
auf MDN.Hier ist ein Beispiel, baut auf der Verzögerung oben:
Aktuellen browser und Knoten Versionen unterstützen
async/await
. Sie können auch die Unterstützung der älteren Umgebungen durch die Umwandlung Ihrer code ES5 mit Hilfe von regenerator (oder Werkzeuge mit regenerator, wie Babel).Lassen Funktionen übernehmen Rückrufe
Einen Rückruf ist einfach eine Funktion übergeben in eine andere Funktion. Dass eine andere Funktion aufrufen können Sie die Funktion übergeben, Wann immer er bereit ist. Im Rahmen einer asynchronen Prozess, der callback wird aufgerufen, sobald der asynchrone Prozess abgeschlossen ist. In der Regel, das Ergebnis wird an den Rückruf übergeben wird.
In dem Beispiel die Frage, die man machen kann
foo
akzeptieren Sie einen Rückruf und verwenden Sie es alssuccess
Rückruf. Also daswird
Hier definieren wir die Funktion "inline", aber Sie können passieren keine Funktion Referenz:
foo
selbst ist wie folgt definiert:callback
beziehen sich auf die Funktion, die wir übergebenfoo
wenn wir ihn nennen und wir geben es aufsuccess
. I. e. sobald die Ajax-Anfrage erfolgreich ist, wird$.ajax
rufencallback
und übergeben Sie die Antwort auf die Rückfrage (verwiesen werden kann, um mitresult
, da dies ist, wie wir definiert die callback).Können Sie auch den Prozess der Reaktion, vor der übergabe an die callback:
Ist es einfacher, code zu schreiben, mithilfe von callbacks als es scheinen mag. Nach allem, JavaScript im browser ist stark event-getrieben (DOM-Ereignisse). Empfängt die Ajax-response ist nichts anderes als ein Ereignis.
Schwierigkeiten könnten entstehen, wenn Sie haben, arbeiten mit Drittanbieter-code, aber die meisten Probleme können gelöst werden, indem gerade der Gedanke durch den Ablauf der Anwendung.
ES2015+: Verspricht mit dann()
Den Versprechen API ist ein neues feature von ECMAScript 6 (ES2015), aber es hat eine gute browser-Unterstützung schon. Es gibt auch viele Bibliotheken, die die Umsetzung der Norm Verspricht-API und stellen zusätzliche Methoden zur Erleichterung der Nutzung und die Zusammensetzung der asynchronen Funktionen (z.B. bluebird).
Versprechungen sind Container für Zukunft Werte. Wenn das Versprechen erhält der Wert (es ist gelöst) oder wenn er gekündigt wird (abgelehnt), benachrichtigt er alle seine "Zuhörer", die für den Zugriff auf diesen Wert.
Den Vorteil, der über der Ebene Rückrufe ist, dass Sie erlauben, Sie zu entkoppeln, Ihren code und Sie sind leichter zu Komponieren.
Hier ist ein einfaches Beispiel für die Verwendung eines Versprechen:
Angewendet, um unsere Ajax-calls, die wir verwenden konnten Versprechungen wie diese:
Beschreibt alle Vorteile, die Versprechen, bieten, würde den Rahmen dieser Antwort, aber wenn Sie neuen code schreiben, sollten Sie ernsthaft in Erwägung ziehen. Sie bieten eine hohe Abstraktion und die Trennung von code.
Mehr Informationen über verspricht: HTML5 rocks - JavaScript Verspricht
Seite Hinweis: jQuery deferred-Objekte
Latente Objekte sind die jQuery-benutzerdefinierte Implementierung verspricht (vor dem Versprechen API standardisiert wurde). Sie Verhalten sich fast wie Versprechungen, sondern setzen ein etwas anderes API.
Jeder Ajax-Methode von jQuery gibt bereits einen "deferred object" (eigentlich ein Versprechen, ein deferred-Objekt), die Sie einfach nur wieder Ihre Funktion:
Seite Hinweis: Versprechen Fallstricke
Beachten Sie, dass Versprechen und latente Objekte sind nur Container für einen zukünftigen Wert, Sie sind nicht der Wert selbst. Zum Beispiel, angenommen, Sie hätten die folgenden:
Dieser code verkennt die oben genannten ungleichzeitigkeiten Probleme. Insbesondere
$.ajax()
nicht einfrieren den code während es überprüft die '/password' - Seite auf Ihrem server sendet eine Anfrage an den server und während er wartet, sofort wieder einen jQuery-Ajax-Deferred-Objekt, nicht die Antwort vom server. Das bedeutet, dass dieif
- Anweisung wird immer Holen Sie sich dieses Deferred-Objekt, behandeln Sie es alstrue
aus, und fahren Sie, als ob der Benutzer angemeldet ist. Nicht gut.Aber der fix ist einfach:
Nicht empfohlen: - Synchrone "Ajax", ruft
Wie ich bereits erwähnt habe, einige(!) asynchrone Operationen synchron-Kollegen. Ich bin kein Befürworter Ihrer Verwendung, aber für die Vollständigkeit halber, hier ist, wie Sie durchführen würde ein synchroner Aufruf:
Ohne jQuery
Wenn Sie direkt mit einem
XMLHTTPRequest
Objekt, passfalse
als drittes argument.open
.jQuery
Wenn Sie jQuery, können Sie die
async
optionfalse
. Beachten Sie, dass diese option veraltet seit jQuery 1.8.Sie können dann entweder immer noch einen
success
Rückruf oder den Zugriff auf dieresponseText
Eigenschaft des jqXHR-Objekt:Wenn Sie eine andere jQuery-Ajax-Methode, wie
$.get
,$.getJSON
usw., Sie haben zu ändern, um$.ajax
(da kann man sich nur übergeben Parameter zur Konfiguration$.ajax
).Heads-up! Es ist nicht möglich, eine synchrone JSONP Anfrage. JSONP naturgemäß immer asynchron (ein Grund mehr, nicht auch nur erwägen, diese option).
In Lösung 1, sub jQuery, konnte ich nicht verstehen, diese Zeile:
If you use any other jQuery AJAX method, such as $.get, $.getJSON, etc., you have them to $.ajax.
(ja, ich weiß, mein nick ist ein bisschen ironisch, in diesem Fall)Mmmh, ich weiß nicht, wie es gemacht werden kann, klarer. Sehen Sie, wie
foo
aufgerufen wird und eine Funktion übergeben wird (foo(function(result) {....});
)?result
ist in dieser Funktion und ist die Antwort des Ajax-request. Um auf diese Funktion, der erste parameter von foo aufgerufen wirdcallback
zugeordnetsuccess
statt einer anonymen Funktion. Also$.ajax
rufencallback
wenn die Anfrage erfolgreich war. Ich versuchte zu erklären, es ein bisschen mehr.Der Chat für diese Frage ist verstorben, also bin ich nicht sicher, wo vorzuschlagen beschriebenen änderungen, aber ich schlage vor: 1) Ändern Sie den synchronen Teil, um eine einfache Erläuterung, warum es schlecht ist ohne code-Beispiel, wie es zu tun. 2) Entfernen/Zusammenführen der callback-Beispiele nur zeigen, je flexibler Latente Haltung, die ich vielleicht auch ein wenig leichter zu Folgen, für diejenigen, die Javascript lernen.
Ich glaube, Sie missverstanden, dass ein Teil der Antwort. Sie können nicht verwenden
$.getJSON
wenn Sie möchten, dass der Ajax request synchron sein. Sie sollten jedoch nicht-Ereignis soll die Anfrage synchron sein, so dass nicht gelten. Sie sollten mit callbacks oder verspricht zu behandeln die Antwort, wie es bereits früher in der Antwort.InformationsquelleAutor Felix Kling
Wenn Sie nicht Verwendung von jQuery im code ist diese Antwort für dich
Dein code sollte etwas entlang der Linien von:
Felix Kling hat einen guten job, Schreibe eine Antwort für Menschen, die mit Hilfe von jQuery für AJAX, ich habe beschlossen, eine alternative für Menschen, die nicht sind.
(Hinweis, für diejenigen, die sich mit der neuen
fetch
API -, Winkel-oder zusagen, die ich Hinzugefügt habe, eine andere Antwort unten), Was Sie vor
Dies ist eine kurze Zusammenfassung der "Erklärung für das problem" von der anderen Antwort, wenn du nicht sicher bist, nach der Lektüre dieses, gelesen.
Den Eine in AJAX steht für asynchrone. Das bedeutet, dass das senden der Anfrage (oder eher das empfangen der Antwort) aus der normalen Ausführung fließen. In deinem Beispiel
.senden
sofort zurückkehrt und die nächste Anweisungreturn result;
, der ausgeführt wird, bevor die Funktion, die Sie übergeben, wiesuccess
Rückruf wurde auch genannt.Dies bedeutet, wenn Sie zurückgeben, und der Zuhörer, die Sie definiert haben, nicht noch ausführen, was bedeutet, dass der Wert, die Sie zurückgeben, wurde nicht definiert.
Hier ist eine einfache Analogie
(Fiddle)
Den Wert
a
zurückgegeben wirdundefined
da diea=5
Teil nicht ausgeführt hat, noch. AJAX Taten wie diese, die Sie zurückgeben, wird der Wert, bevor der server die chance bekam, zu sagen, Ihr browser, was das Wert ist.Eine mögliche Lösung dieses Problems ist der code re-aktiv , zu sagen, Ihr Programm, was zu tun ist, wenn die Berechnung abgeschlossen.
Dies wird als CPS. Grundsätzlich sind wir vorbei
getFive
eine Aktion ausführen, wenn es abgeschlossen ist, die wir erzählen unseren code, wie Sie reagieren, wenn ein Ereignis abgeschlossen ist (wie unsere AJAX-calls, oder in diesem Fall die timeout).Verwendung wäre:
Die alarmieren sollte "5" auf dem Bildschirm. (Fiddle).
Mögliche Lösungen
Grundsätzlich gibt es zwei Möglichkeiten, wie man dieses Problem lösen:
1. Synchrone AJAX - tun Sie es nicht!!
Als synchrone AJAX, tun Sie es nicht! Felix ' Antwort wirft einige überzeugende Argumente, warum es eine schlechte Idee. Um es zusammenzufassen, es schaudert browser des Benutzers, bis der server liefert die Antwort und eine sehr schlechte user-experience. Hier ist eine kurze Zusammenfassung aus MDN, warum:
Wenn Sie haben, es zu tun, können Sie ein flag: Hier ist, wie:
2. Umstrukturierung code
Lassen Sie Ihre Funktion akzeptieren Sie einen Rückruf. Im Beispiel-code
foo
werden können, um zu akzeptieren, einen Rückruf. Wir werden sagen unser code wie reagieren wennfoo
abgeschlossen.Also:
Wird:
Hier passierten wir eine anonyme Funktion, die aber genauso leicht könnten wir übergeben Sie einen Verweis auf eine vorhandene Funktion, machen es so Aussehen:
Weitere details auf, wie diese Art von callback-design fertig ist, überprüfen Sie Felix ' Antwort.
Nun, lassen Sie uns definieren, foo selbst entsprechend zu handeln
(fiddle)
Wir haben jetzt unsere foo-Funktion akzeptiert eine Aktion ausgeführt werden, wenn der AJAX-Vorgang erfolgreich abgeschlossen wurde, verlängern wir diese weiter, indem Sie prüfen, ob der response-status nicht 200 und entsprechend zu handeln (erstellen einer fail-handler und so). Effektiv die Lösung unseres Problem.
Wenn Sie noch eine harte Zeit zu verstehen, diesen Lesen Sie die AJAX-erste Schritte bei MDN.
Ich habe ein Kopfgeld auf Sie in diese Frage, ich werde sehen, was ich kann Fisch aus. Ich bin das entfernen das Zitat aus der Antwort in der Zwischenzeit.
Nur für die Referenz, XHR-2 erlaubt uns, die
onload
- handler, die nur feuert, wennreadyState
ist4
. Natürlich, es ist nicht unterstützt in IE8. (iirc, vielleicht brauchen Bestätigung.)Ihre Erklärung, wie Sie übergeben Sie eine anonyme Funktion als callback gültig ist aber irreführend. Beispiel var bar = foo(); aufgefordert werden, für die eine variable definiert werden, in der Erwägung, dass die von Ihnen vorgeschlagenen foo(functim() {}); nicht definieren, bar
Gute Lehrer machen harte Themen leichter zu lernen. Schlechte Lehrer machen Ihnen das Gefühl, dumm für nicht leicht zu lernen, ein hartes Thema. Danke @BenjaminGruenbaum, Sie war eine gute Lehrerin hier.
InformationsquelleAutor Benjamin Gruenbaum
XMLHttpRequest 2 (zunächst Lesen Sie die Antworten von Benjamin Gruenbaum & Felix Kling)
Wenn Sie nicht verwenden, wird jQuery und möchte einen schönen kurzen XMLHttpRequest-2, die funktioniert auf modernen Browsern und auch auf mobilen Browsern, schlage ich es auf diese Weise:
Wie Sie sehen können:
Gibt es zwei Möglichkeiten, um die Reaktion dieser Ajax-Aufruf (drei mit dem XMLHttpRequest var-name):
Einfachsten:
Oder wenn Sie aus irgendeinem Grund
bind()
den Rückruf einer Klasse:Beispiel:
Oder (der oben ist besser, anonyme Funktionen sind immer ein problem):
Nichts leichter.
Nun, einige Leute werden wahrscheinlich sagen, dass es besser onreadystatechange oder auch das XMLHttpRequest-variable name. Das ist falsch.
Check-out XMLHttpRequest-erweiterte Funktionen
Es unterstützt alle modernen Browser. Und ich kann bestätigen-ich bin mit diesem Ansatz, da XMLHttpRequest-2 vorhanden ist. Ich hatte nie jede Art von problem auf allen Browsern, die ich benutze.
onreadystatechange ist nur nützlich, wenn Sie wollen, um den Header auf Zustand 2.
Mithilfe der
XMLHttpRequest
variable name ist ein weiterer großer Fehler, wie Sie benötigen, um ausführen der callback innerhalb der onload - /oreadystatechange Verschlüsse sonst Sie es verloren.Nun, wenn Sie wollen, etwas komplexer mit Hilfe des post-und FormData, die Sie leicht erweitern können Sie diese Funktion:
Wieder ... es ist eine sehr kurze Funktion, aber es hat sich & post.
Beispiele:
Oder übergeben Sie einen full-form-element (
document.getElementsByTagName('form')[0]
):Oder einige benutzerdefinierte Werte:
Wie Sie sehen können ich habe nicht implementieren sync... es ist eine schlimme Sache.
Gesagt haben, dass ..., warum nicht tun Sie es der einfache Weg?
Wie bereits erwähnt in den Kommentar, die Verwendung von error && synchron nicht vollständig zu brechen die Punkt der Antwort. Das ist ein netter kurzer Weg, um Ajax in der richtigen Weise?
Error handler
Im obigen script, Sie haben einen Fehler-handler, die ist statisch definiert, damit es beeinträchtigt nicht die Funktion. Der Fehler-handler kann für andere Funktionen verwendet werden zu können.
Aber wirklich ein Fehler der nur Möglichkeit ist das erstellen einer falschen URL, in dem Fall jeder browser gibt eine Fehlermeldung aus.
Fehler-Handler sind vielleicht nützlich, wenn Sie benutzerdefinierte Header, set der responseType auf blob-array-Puffer oder was auch immer...
Selbst wenn Sie pass 'POSTAPAPAP", wie die Methode es wird nicht ein Fehler ausgelöst.
Selbst wenn Sie pass 'fdggdgilfdghfldj' als formdata es nicht ein Fehler ausgelöst.
Im ersten Fall wird der Fehler innerhalb der
displayAjax()
unterthis.statusText
alsMethod not Allowed
.Im zweiten Fall, es funktioniert einfach. Sie haben zu prüfen, auf der server-Seite, wenn Sie übergeben die richtige post-Daten.
cross-domain nicht zulässig Fehler automatisch.
In der Fehlermeldung als Antwort, es gibt keine Fehler codes.
Es ist nur die
this.type
die Fehler.Warum sollten Sie einen error-handler, wenn Sie absolut keine Kontrolle über Fehler?
Die meisten Fehler sind wieder im inneren dieses in der callback-Funktion
displayAjax()
.Also: Keine Notwendigkeit für Fehler prüft, ob Sie in der Lage sind, zu kopieren und fügen Sie den URL richtig. 😉
PS: Als der erste test, ich schrieb x('x', displayAjax)..., Total und er bekam eine Antwort...??? So ich habe den Ordner wo die HTML liegt, und dort war eine Datei namens "x.xml'. Also selbst wenn Sie vergessen, die Endung der Datei XMLHttpRequest-2 FINDEN ES. I LOL ' D
Lesen einer Datei synchron
Nicht.
Wenn Sie möchten, um zu blockieren die browser für eine Weile laden eine schöne, große
.txt
Datei synchron.Können Sie jetzt tun,
Es gibt keinen anderen Weg, dies zu tun in einer nicht-asynchrone Weise. (Ja, mit setTimeout Schleife... aber ernsthaft?)
Einem anderen Punkt... wenn Sie die Arbeit mit APIs oder einfach nur Ihre eigene Liste der Dateien, oder was man auch immer verwenden verschiedener Funktionen für jede Anforderung...
Nur wenn Sie eine Seite haben, wo Sie die Last immer die gleiche XML/JSON oder was auch immer benötigen Sie nur eine Funktion. In diesem Fall ändern Sie ein wenig die Ajax-Funktion und das ersetzen von b mit Ihrer besonderen Funktion.
Die oben genannten Funktionen sind für grundlegende Verwendung.
Wenn Sie möchten, ERWEITERN Sie die Funktion...
Ja, Sie können.
Ich bin mit einer Menge von APIs und eine der ersten Funktionen, die ich integrieren Sie in jede HTML-Seite ist die erste Ajax-Funktion in dieser Antwort, mit nur...
Aber Sie können tun, eine Menge Sachen mit XMLHttpRequest 2:
Machte ich einen download-manager (mit Bereichen auf beiden Seiten mit Lebenslauf, filereader, filesystem), verschiedene Bild resizers-Wandler mit Leinwand, füllen die web-SQL-Datenbanken mit base64images und vieles mehr... Aber in diesen Fällen sollten Sie eine Funktion erstellen, die nur für diesen Zweck... manchmal braucht man einen blob, array-Puffer, können Sie Kopfzeilen überschreiben, mimetype und es gibt noch viel mehr...
Aber die Frage ist hier, wie die Rückkehr einer Ajax-Antwort... (ich fügte hinzu, eine einfache Möglichkeit.)
x
,ajax
oderxhr
könnte schöner sein :)). Ich weiß nicht, wie es Adressen Rücksendung der Antwort von einem AJAX-Aufruf. (könnte jemand noch tunvar res = x("url")
und nicht verstehen, warum es nicht funktioniert ;)). Auf einer seitlichen Anmerkung - es wäre cool wenn Sie zurückc
von der Methode, so dass Benutzer können hook auferror
etc.2.ajax is meant to be async.. so NO var res=x('url')..
Das ist der ganze Sinn dieser Frage und die Antworten 🙂warum ist es ein " c " - parameter in den Funktionen, wenn auf der ersten Zeile, die Sie überschreiben, was Wert hatte es? bin ich etwas fehlt?
Sie können Parameter verwenden, die als Platzhalter zu vermeiden, schreiben mehrmals "var"
So schrieben Sie, irreführende, unleserliche code in einer sogenannten answer, um zu speichern ein paar Tastendrücken? Bitte tun Sie das nicht.
InformationsquelleAutor cocco
Sind Sie mit Ajax nicht richtig. Die Idee ist nicht, um es etwas zurückkehren, aber statt übergeben Sie die Daten zu einem so genannten callback-Funktion, die Griffe der Daten.
Ist:
Rückkehr nichts im submit-handler wird nicht alles tun. Stattdessen müssen Sie entweder die Daten, oder tun, was Sie wollen mit ihm direkt im Erfolgs-Funktion.
success: handleData
und es würde funktionieren.Und was ist, wenn Sie zurückkehren möchten, die "responseData" außerhalb "handleData" ... 🙂 ... wie Sie es tun ... ? ... führen ein einfaches zurück wird es zurück an den "Erfolg" callback des ajax ... und nicht außerhalb von "handleData" ...
hristov Sie übersehen diesen Punkt. Submit-handler ist nicht die
success
Methode, es ist der umliegende Bereich der$.ajax
.Ich habe das nicht entgehen. Wenn Sie nahm den Inhalt des handleData und steckte es in die success-Methode, es würden genauso handeln...
InformationsquelleAutor Nic
Die einfachste Lösung ist, erstellen Sie eine JavaScript-Funktion und rufen Sie es für die Ajax -
success
Rückruf.Sorry, ich habe vergessen, einen Kommentar zu hinterlassen (die ich normalerweise tun!). Ich downvoted. Downvotes nicht angeben, sachliche Korrektheit oder fehlende, Sie zeigen die Nützlichkeit im Kontext oder-Mangel. Ich finde nicht, Ihre Antwort sinnvoll, da Felix ' s das schon erklärt, nur in viel mehr detail. Auf einer seitlichen Anmerkung, warum würden Sie stringify die Antwort, wenn es ist JSON?
ok.. @Benjamin ich verwendet stringify, zu konvertieren, ein JSON-Objekt zu einem string. Und vielen Dank für die Klarstellung, dein Punkt. Halten Sie im Verstand, post aufwendiger Antworten.
Und was ist, wenn Sie zurückkehren möchten, die "responseObj" außerhalb "successCallback" ... 🙂 ... wie Sie es tun ... ? ... führen ein einfaches zurück wird es zurück an den "Erfolg" callback des ajax ... und nicht außerhalb von "successCallback" ...
InformationsquelleAutor Hemant Bavle
Beantworte ich mit einem schrecklich anmutenden, handgezeichneten comic. Das zweite Bild ist der Grund, warum
result
istundefined
im code Beispiel.Wäre toll, wenn Sie zusätzlichen code-Zeilen bei jedem Bild, um die Konzepte zu veranschaulichen.
InformationsquelleAutor Johannes Fahrenkrug
Angular1
Für Menschen, die mit AngularJS, behandeln kann diese situation mit
Promises
.Hier es sagt,
Finden Sie eine schöne Erklärung hier auch.
Beispiel gefunden, in docs, die unten erwähnt werden.
Angular2 und Später
In
Angular2
mit Blick auf das folgende Beispiel, aber die empfohlen zu verwendenObservables
mitAngular2
.}
Können Sie verbrauchen, dass auf diese Weise,
Sehen die original hier posten. Aber Typoskript nicht unterstützt native es6 Verspricht, wenn Sie es verwenden möchten, müssen Sie möglicherweise das plugin für die.
Zusätzlich ist hier die verspricht spec hier definieren.
Es funktioniert nicht. promiseB erhalten 'undefined'
jQuery und fetch Methoden, die sowohl Rendite verspricht als gut. Ich würde vorschlagen, mit der überarbeitung Ihrer Antwort. Aber jQuery ist nicht ganz die gleiche (dann gibt es, aber Fang nicht).
InformationsquelleAutor Maleen Abewardana
Haben Sie einen Blick auf dieses Beispiel:
Wie Sie sehen können
getJoke
ist Rückkehr eine gelöst Versprechen (es wird beschlossen, bei der Rückkehrres.data.value
). Also warten Sie, bis die $http.Holen Sie sich Anfrage abgeschlossen ist, und dann Konsole.log(res.Witz) ausgeführt wird (wie eine normale asynchrone flow).Dies ist die plnkr:
http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg/
ES6 Weg (async - await)
InformationsquelleAutor Francisco Carmona
Anderen Ansatz zurückgeben einen Wert aus einer asynchronen Funktion, ist die übergabe in ein Objekt gespeichert wird das Ergebnis des asynchronen Funktion.
Hier ist ein Beispiel:
Ich bin mit der
result
- Objekt zu speichern, der Wert wird bei der asynchronen operation. Dies kann das Ergebnis auch zur Verfügung, nachdem der asynchrone job.Ich diesen Ansatz sehr. Ich wäre daran interessiert zu wissen, wie gut dieser Ansatz funktioniert, wo die Verdrahtung das Ergebnis wieder durch die aufeinander aufbauenden Modulen beteiligt ist.
result
. Es funktioniert, weil Sie Lesen die variable nachdem die async-Funktion abgeschlossen ist.InformationsquelleAutor jsbisht
Dies ist einer der Orte, die zwei-Wege-Datenbindung, dass in vielen neuen JavaScript-frameworks gut funktionieren wird für Sie...
Also, wenn Sie Eckig, Reagieren oder andere frameworks, die zwei-Wege-Datenbindung oder store-Konzept dieses Problem ist einfach behoben, so dass in einfachen Wort, dein Ergebnis ist
undefined
auf der ersten Stufe, so haben Sieresult = undefined
bevor Sie die Daten empfangen, dann, sobald Sie das Ergebnis zu erhalten, wird es aktualisiert, und erhalten Sie zugeordnet zu den neuen Wert, die Reaktion von deinem Ajax-Aufruf...Aber wie Sie es tun können in reiner javascript oder jQuery zum Beispiel als Sie gefragt in dieser Frage?
Können Sie eine Rückruf, Versprechen und vor kurzem beobachtbaren zu handhaben ist es für Sie, zum Beispiel in verspricht wir haben einige Funktion, wie Erfolg() oder (), die ausgeführt werden, wenn Ihre Daten für Sie bereit, das gleiche mit callback oder abonnieren Funktion auf beobachtbaren.
Beispielsweise in Ihrem Fall, die Sie verwenden jQuery, können Sie etwas wie das hier tun:
Weitere Informationen Studie über verspricht und observablen die neueren Möglichkeiten, dies zu tun async stopft.
$.ajax({url: "api/data", success: fooDone.bind(this)});
Dies ist eigentlich falsch, wie zu Reagieren ist one-way data binding
Sie sind nicht falsch, aber nicht das Rechte, Reagieren Requisiten sind Objekt und wenn geändert, wird diese änderung in der gesamten Anwendung, aber es ist nicht eine Weise Reagieren, die Entwickler empfehlen, es zu benutzen...
InformationsquelleAutor Alireza
Während verspricht und Rückrufe funktionieren in vielen Situationen, es ist ein Schmerz in der Rückseite, um etwas auszudrücken wie:
Würden Sie am Ende gehen durch
async1
; überprüfen Sie, obname
undefiniert ist oder nicht, und rufen Sie die callback entsprechend.Während es okay in kleinen Beispielen wird es ärgerlich, wenn Sie haben eine Menge von ähnlichen Fällen und Fehlerbehandlung beteiligt.
Fibers
hilft bei der Lösung des Problems.Können Sie Kasse das Projekt hier.
ist dies ähnlich zu generator-Funktionen? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...*
Ist das noch relevant?
Sie können Gebrauch machen von
async-await
wenn Sie einige der neuesten Versionen der Knoten. Wenn jemand stecken, die mit älteren Versionen können Sie diese Methode verwenden.InformationsquelleAutor rohithpr
Kurze Antwort ist, implementieren Sie eine callback-wie diese:
InformationsquelleAutor Pablo Matias Gomez
2017 Antwort: Sie können jetzt genau das tun, was Sie will, in jedem aktuellen browser und Knoten
Ist das ganz einfach:
Hier ist eine funktionierende version von code:
warten ist, unterstützt in allen aktuellen Browsern und Knoten 8
Knoten 8 enthält nodejs.org/api/util.html#util_util_promisify_original, die verwendet werden können, um die node.js API-Rendite verspricht. Ob Sie die Zeit und Geld für die Unterstützung von nicht-aktuellen Browser offensichtlich hängt von Ihren Anforderungen ab.
IE 11 ist immer noch eine aktuelle browser-2018, traurig und es nicht unterstützen
await/async
IE11 ist nicht einen aktuellen browser. Es erschien vor 5 Jahren, verfügt über einen weltweiten Marktanteil von 2,5% laut caniuse, und es sei denn, jemand ist eine Verdoppelung Ihres Budgets zu ignorieren, aktuelle tech -, dann ist es nicht Wert, die meisten Menschen die Zeit.
InformationsquelleAutor mikemaccana
Können Sie diese benutzerdefinierten Bibliothek (geschrieben mit Versprechen), um einen remote-Aufruf.
Einfaches Beispiel:
InformationsquelleAutor Vinoth Rajendran
Browser kann in drei Teile unterteilt werden:
1)Ereignis-Schleife
2)Web-API
3)Ereignis-Queue
Ereignis-Schleife läuft für immer ich.e Art von Endlosschleife.Ereignis-Queue ist, wo alle Ihre Funktion gedrängt werden, die auf ein Ereignis(Beispiel:Klick) dies ist eins nach dem anderen durchgeführt Warteschlange und in die Ereignis-Schleife, die diese Funktion ausführen und bereitet es selbst für nächste nach dem ersten ausgeführt wird.Dies bedeutet, dass die Ausführung einer Funktion nicht startet, bis Sie die Funktion, bevor Sie in der Warteschlange wird ausgeführt-Ereignis-Schleife.
Nun lass uns denken, dass wir schoben zwei Funktionen in einer Warteschlange ist für einen Daten-server und ein anderer nutzt diese Daten.Wir schoben die serverRequest () - Funktion in der Warteschlange zuerst, dann utiliseData () - Funktion. serverRequest Funktion geht in der event-Schleife und macht einen Aufruf an server, da wir nie wissen, wie viel Zeit es dauern wird, um Daten vom server
damit dieser Prozess dürfte sich Zeit zu nehmen und so sind wir beschäftigt unsere event-Schleife, so hängen unsere Seite, das ist, wo Web-API kommen in Rolle Sie nehmen in dieser Funktion von der Ereignis-Schleife und beschäftigt sich mit server-event-Schleife, frei, so dass wir führen folgende Funktion aus der Warteschlange.Die nächste Funktion in der Warteschlange ist utiliseData (), das geht in der Schleife, die aber, weil keine Daten verfügbar sind, geht es Abfälle und die Ausführung der nächsten Funktion weiter, bis Ende der Warteschlange.(Das nennt man Asynchronen aufrufen ich.e wir können etwas anderes tun, bis wir Daten)
Lassen, nehmen wir an, unsere serverRequest() Funktion eine return-Anweisung in einem code, wenn wir wieder die Daten vom server-Web-API wird die push-in-Warteschlange an das Ende der Warteschlange.
Als es geschoben bekommen am Ende in der Warteschlange können wir nutzen Ihre Daten, da es keine Funktion gibt, die Sie Links in unserer Warteschlange zur Nutzung dieser Daten.Somit ist es nicht möglich, etwas zurückgeben von Asynchronen Aufruf.
Also Lösung ist Rückruf oder Versprechen.
Ein Bild aus einer der Antworten hier, Richtig erklärt callback verwenden...
Wir geben unsere Funktion(Funktion, Nutzung Daten zurückgegeben, die von server) - Funktion aufrufen von server.
In meinem Code heißt es
Lesen Sie hier für neue Methoden in der ECMA(2016/17) für asynchronen Aufruf(@Felix Kling Antwort Oben)
https://stackoverflow.com/a/14220323/7579856
InformationsquelleAutor Aniket Jha
Es ist ein sehr häufiges Problem, mit dem wir konfrontiert sind, während Sie Probleme mit der 'Geheimnisse' von JavaScript. Lassen Sie mich versuchen, zu entmystifizieren, dieses Geheimnis heute.
Beginnen wir mit einer einfachen JavaScript-Funktion:
Das ist eine einfache synchronen Funktionsaufruf (wo jede Zeile code ist "fertig mit der Aufgabe', bevor der nächste in der Reihenfolge), und das Ergebnis ist das gleiche, wie erwartet.
Nun fügen wir ein wenig verdrehen, durch die Einführung etwas Verspätung in unsere Funktion, so dass alle code-Zeilen sind nicht 'fertig' in der Reihenfolge. So wird es emulieren asynchrones Verhalten der Funktion :
So dort gehen Sie, diese Verspätung brach die Funktionalität, die wir erwarten! Aber was genau ist passiert ? Gut, es ist eigentlich ziemlich logisch wenn man sich den code. die Funktion
foo()
nach Ausführung, gibt nichts zurück (also zurückgegebene Wert istundefined
), aber es funktioniert starten Sie einen timer, die ausgeführt wird, eine Funktion nach 1s zurück 'wohoo'. Aber wie Sie sehen können, ist der Wert, der zugewiesen bar ist der sofort wieder Zeug von foo(), nicht alles andere kommt später.Also, wie wir dieses Problem angehen?
Fordern wir unsere Funktion für ein VERSPRECHEN.
Versprechen ist wirklich, was es bedeutet : es bedeutet, dass die Funktion garantiert Ihnen mit jeder Ausgabe wird es in der Zukunft. also lassen Sie uns sehen, Sie in Aktion für unser kleines problem vor :
So, die Zusammenfassung ist - zur Bewältigung der asynchrone Funktionen wie ajax-basierte Anrufe etc., Sie können ein Versprechen
resolve
den Wert (der Sie die Absicht zur Rückkehr). Also, kurz gesagt, Sie beheben Wert statt Rückkehr bei asynchronen Funktionen.UPDATE (Verspricht mit async/await)
Abgesehen von der Verwendung
then/catch
zu arbeiten, mit dem Versprechen, existiert noch ein weiterer Ansatz. Die Idee ist erkennen eine asynchrone Funktion und dann warten, bis die verspricht zu beheben, bevor die nächste Zeile code. Es ist nur noch derpromises
unter der Haube, aber mit einer anderen syntaktischen Ansatz. Um die Dinge klarer, finden Sie einen Vergleich unten:dann/catch-version:
async/await-version:
Ich persönlich glaube nicht, dass es einen besten Weg als solche. Ich benutze verspricht mit dann/fangen , async/await, wie auch als Generatoren für die asynchronen Teile von meinem code. Es hängt weitgehend von dem Kontext der Nutzung.
InformationsquelleAutor Anish K.
ECMAScript 6 'Generatoren', mit denen Sie leicht das Programm in einem asynchronen Stil.
Zu den oben stehenden code ausführen, Sie tun dies:
Wenn Sie brauchen, um Ziel-Browsern, die keine Unterstützung ES6 Sie den code ausführen können, die durch Babel oder closure-compiler zum generieren von ECMAScript 5.
Den Rückruf
...args
eingewickelt in ein array und destructured, wenn Sie Sie Lesen, so dass Sie das Muster fertig werden kann, Rückrufe, die mehrere Argumente. Zum Beispiel mit Knoten fs:InformationsquelleAutor James
Kurze Antwort: Ihre
foo()
- Methode gibt sofort einen Wert zurück, während die$ajax()
Aufruf wird asynchron ausgeführt , nachdem die Funktion. Das problem ist dann, wie oder wo speichern die Ergebnisse abgerufen, indem die asynchronen aufrufen, sobald er zurückkehrt.Wurden bereits mehrere Lösungen in diesem thread. Vielleicht der einfachste Weg ist, um ein Objekt übergeben, um die
foo()
Methode, und zum speichern der Ergebnisse in einem Mitgliedstaat des Objekts, nach der asynchrone Aufruf abgeschlossen ist.Beachten Sie, dass der Aufruf
foo()
noch nichts zurück nützlich. Jedoch, das Ergebnis der asynchronen Aufruf wird nun gespeichert inresult.response
.InformationsquelleAutor David R Tribble
Verwenden
callback()
- Funktion in derfoo()
Erfolg.Versuchen Sie auf diese Weise. Es ist einfach und leicht zu verstehen.
InformationsquelleAutor Mahfuzur Rahman
Finden wir uns in einem Universum, das erscheint, um den Fortschritt entlang einer dimension, nennen wir "Zeit". Wir verstehen nicht wirklich, was Zeit ist, aber wir haben uns entwickelt, Abstraktionen und Vokabular, lassen Sie uns Grund-und darüber reden: "Vergangenheit", "Gegenwart", "Zukunft", "vor", "nach".
Computer-Systeme, die wir bauen-mehr und mehr-Zeit als eine wichtige dimension. Bestimmte Dinge sind so eingerichtet, dass in der Zukunft geschehen wird. Dann werden andere Dinge passieren müssen, nachdem die ersten Dinge, die irgendwann auftreten. Dies ist die grundlegende Idee namens "Asynchronität". In unserer zunehmend vernetzten Welt, der häufigste Fall der Asynchronität ist warten auf ein remote-system zu reagieren, um einige Anfrage.
Betrachten wir ein Beispiel. Sie rufen den Milchmann und um etwas Milch. Wenn er kommt, werden Sie wollen, um es in Ihren Kaffee. Sie können nicht die Milch in deinen Kaffee jetzt, denn es ist hier aber noch nicht. Sie haben zu warten, bis Sie kommen, bevor Sie es in Ihren Kaffee. In anderen Worten, das folgende funktioniert nicht:
Weil JS keine Möglichkeit hat, zu wissen, dass es braucht, um warten für
order_milk
zu beenden, bevor es ausgeführt wirdput_in_coffee
. In anderen Worten, es weiß nicht, dassorder_milk
ist asynchrone--ist etwas, was nicht geht in der Folge der Milch, bis irgendwann in der Zukunft mal. JS und andere deklarative Sprachen ausführen, eine Anweisung nach der anderen ohne Wartezeiten.Den klassischen JS-Ansatz zu diesem problem, unter Ausnutzung der Tatsache, dass JS unterstützt Funktionen als first-class-Objekte, die übergeben werden können, um, ist die übergabe einer Funktion als parameter für die asynchrone Anforderung, die Sie dann aufrufen, wenn er abgeschlossen hat seine Aufgabe, irgendwann in der Zukunft. Das ist die "callback" - Ansatz. Es sieht wie folgt aus:
order_milk
startet, Bestellungen die Milch, dann, wenn und nur wenn es ankommt, ruft esput_in_coffee
.Das problem mit dieser callback-Methode ist, dass Sie belastet die normale Semantik einer Funktion ist die Berichterstattung das Ergebnis mit
return
; statt, müssen die Funktionen nicht berichten Ihre Ergebnisse durch den Aufruf einer callback als parameter angegeben. Auch dieser Ansatz kann schnell unhandlich werden, wenn der Umgang mit längeren Sequenzen von Ereignissen. Zum Beispiel, sagen wir mal, ich will warten, bis die Milch in den Kaffee, und dann, und nur dann durchführen, einen Dritten Schritt, nämlich das trinken des Kaffees. Ich habe am Ende brauchen, um zu schreiben etwas wie dieses:wo ich bin, vorbei an
put_in_coffee
sowohl die Milch hinein, und auch die Aktion (drink_coffee
) ausführen, hat die Milch gebracht. Diesen code wird schwer zu schreiben und zu Lesen und zu Debuggen.In diesem Fall könnten wir schreiben den code in die Frage:
Geben Sie Versprechungen
Dies war die motivation für die Vorstellung von einem "Versprechen", die eine Besondere Art von Wert ist eine Zukunft oder asynchrone Ergebnis von einigen Sortieren. Sie repräsentieren etwas, das bereits passiert ist oder passieren in der Zukunft, oder vielleicht nie der Fall sein. Verspricht eine einzelne Methode, benannt
then
, zu der Sie passieren eine Aktion, die ausgeführt wird, wenn das Ergebnis das Versprechen darstellt, realisiert worden.Im Falle unserer Milch und Kaffee, wir design
order_milk
zurückzukehren ein Versprechen für die Milch, die anreisen, dann geben Sieput_in_coffee
alsthen
Aktion, wie folgt:Ein Vorteil dabei ist, dass wir die Zeichenfolge, die diese gemeinsam zu erstellen, die Sequenzen der Zukunft vorkommen werden ("verketten"):
Wenden Sie verspricht, Ihr problem ist. Wir wickeln unsere Anfrage der Logik in eine Funktion, die eine Zusage zurückgibt:
Eigentlich alles, was wir getan haben, ist Hinzugefügt eine
return
um den Anruf zu$.ajax
. Dies funktioniert, weil die jQuery -$.ajax
gibt bereits eine Art Versprechen-wie Sache. (In der Praxis, ohne sich in details, würden wir es bevorzugen, wickeln Sie diese nennen, so wie für die Rückkehr ein echtes Versprechen, oder verwenden Sie einige alternative zu$.ajax
er so.) Nun, wenn wir wollen, um die Datei zu laden und warten Sie, bis er abgeschlossen ist, und dann etwas tun, wir können einfach sagenbeispielsweise
Als mit Versprechungen, die wir uns am Ende übergeben viel Funktionen in
then
, so ist es oft hilfreich, um die mehr kompakt ES6-Stil Pfeil-Funktionen:Die
async
- SchlüsselwortAber es gibt noch etwas vage und unbefriedigend, dass man code schreiben eine Möglichkeit, wenn die synchronen und einer ganz anderen Weise, wenn asynchron. Für synchrone, wir schreiben
aber wenn
a
asynchron ist, mit Versprechungen, die wir haben, um zu schreibenOben, sagten wir, "JS hat keine Möglichkeit zu wissen, dass es braucht, um warten für den ersten Anruf zu beenden, bevor er ausgeführt, die zweite". Wäre es nicht schön, wenn es war einige Weg, zu sagen, JS? Es stellt sich heraus, dass es ist-die
await
Schlüsselwort, verwendet eine spezielle Art von Funktion, die aufgerufen wird ein "async" - Funktion. Diese Funktion ist Teil der kommenden version von ES, ist aber bereits in transpilers wie Babel gegeben, die richtigen Voreinstellungen. Dies ermöglicht es uns, schreiben Sie einfachIn Ihrem Fall, Sie wäre in der Lage, etwas zu schreiben, wie
InformationsquelleAutor
Natürlich gibt es viele Ansätze, wie synchrone Anforderung, Versprechen, aber aus meiner Erfahrung denke ich, man sollte die callback-Ansatz. Es ist natürlich, das asynchrone Verhalten von Javascript.
So, dein code-snippet können Sie umschreiben ein wenig anders:
InformationsquelleAutor Khoa Bui
Die Frage war:
interpretiert werden KANN als:
Die Lösung sein wird, um zu vermeiden, Rückrufe, und verwenden Sie eine Kombination von Verspricht und async/await.
Ich möchte Ihnen ein Beispiel für eine Ajax-Anfrage.
(Obwohl es sein kann, in Javascript geschrieben, ich bevorzuge, es zu schreiben, in Python, und kompilieren Sie es in Javascript mit Hilfe Transcrypt. Es wird deutlich genug sein.)
Können aktivieren Sie zunächst die JQuery-Nutzung, haben
$
erhältlich alsS
:Definieren Sie eine Funktion, welche zurückgibt einen Versprechen, in diesem Fall ein Ajax-Aufruf:
Verwenden Sie die asynchrone code, als wäre es synchrone:
InformationsquelleAutor Pieter Jan Bonestroo
Mal sehen, den Wald, zuerst bevor Blick auf die Bäume.
Gibt es viele informative Antworten mit tollen details, hier ist, werde ich nicht wiederholen Sie alle von Ihnen. Die Taste, um die Programmierung in JavaScript ist, dass zuerst die richtige mentale Modell der gesamten Ausführung.
Beispiel, ein script-tag mit code in den browser geladen.
(Dies ist, warum Sie besorgt sein müssen, mit der
die Bereitschaft auf der Seite zum ausführen von code, wenn es erfordert dom-Elemente
um zuerst konstruiert werden, etc.)
macht--ohne das ausführen alle Ihrer Rückrufe, einschließlich XHR
Anfragen, festlegen von Zeitüberschreitungen, dom-event-Handler, etc. Jede dieser Rückrufe warten, um ausgeführt werden, sitzen in einer Warteschlange warten, um ausgeführt werden, nachdem andere events, die gefeuert haben, alle fertigen Ausführung.
das Ereignis einmal aufgerufen wird, wird dann bis zum Abschluss ausgeführt werden.
Die gute Nachricht ist, dass, wenn Sie diesen Punkt verstehen nun, werden Sie nie sorgen zu machen über Rasse-Bedingungen. Sie sollte die erste und wichtigste Sache, wie Sie wollen, organisieren Sie Ihren code wie im wesentlichen die Reaktion auf verschiedene diskrete Ereignisse, und wie Sie wollen, fädeln Sie zusammen in eine logische Reihenfolge. Können Sie Versprechen oder höhere Ebene neue async - /await-als Werkzeuge zu diesem Zweck, oder Sie können Rollen Sie Ihre eigenen.
Aber Sie sollten keine taktischen Werkzeuge, um ein problem zu lösen, bis Sie sind bequem mit dem eigentlichen problem-Domäne. Zeichnen Sie eine Karte von diesen Abhängigkeiten zu wissen, was ausgeführt werden muss, wenn. Versuch einer ad-hoc-Ansatz, um alle diese Rückrufe ist einfach nicht gehen, um Sie gut zu dienen.
InformationsquelleAutor Haim Zamir
Mit ES2017, sollten Sie dieses, wie die Deklaration der Funktion
Suchen und ausführen wie dieser.
Oder das Versprechen syntax
InformationsquelleAutor Fernando Carvajal
Anstatt werfen-code an Sie, es gibt 2 Konzepte, die der Schlüssel zum Verständnis, wie JS Griffe Rückrufe und Asynchronität. (ist das auch ein Wort?)
Die Ereignis-Schleife und Concurrency-Modell
Gibt es drei Dinge, die Sie brauchen, um bewusst sein; Der Warteschlange; die Ereignis-Schleife und der Stapel
In Breite, vereinfacht ausgedrückt, die Ereignis-Schleife ist wie der Projekt-manager, es ist ständig empfangsbereit für alle Funktionen ausführen möchten und kommuniziert zwischen dem queue und stack.
Sobald es eine Nachricht empfängt, die zum ausführen von etwas, es fügt Sie der Warteschlange. Die Warteschlange ist eine Liste der Dinge, die darauf warten, ausgeführt werden kann (wie dein AJAX-request). Stelle mir das so vor:
Wenn eine dieser Meldungen ist zu gehen, um ihn auszuführen, erscheint die Nachricht aus der Warteschlange ab und erstellt einen stack, der stack ist alles JS ausführen, muss zum ausführen der Anweisung in der Nachricht. Also in unserem Beispiel es wird gesagt, zu nennen
foobarFunc
Also alles, was foobarFunc ausführen, muss (in unserem Fall
anotherFunction
) bekommt auf dem Stapel abgelegt. ausgeführt, und dann vergessen - der Ereignis-Schleife werden dann bewegen auf die nächste Sache, die in die Warteschlange (oder Nachrichten Abhören)Das wichtigste hier ist die Reihenfolge der Ausführung. Das ist
, WENN etwas laufen
Wenn Sie einen Anruf tätigen, die mit AJAX an einen externen Dritten oder laufen alle asynchron-code (ein setTimeout zum Beispiel), Javascript angewiesen ist, auf eine Antwort, bevor Sie fortfahren können.
Die große Frage ist, Wann wird es die Antwort? Die Antwort ist, wir wissen nicht, - so ist die Ereignis-Schleife wartet auf diese Botschaft, zu sagen: "hey Lauf mir". Wenn JS nur wartete, um für die Nachricht synchron Ihre Anwendung würde frieren, und es wird saugen. So JS führt auf die Durchführung der nächsten Element in der Warteschlange, während der Wartezeit für die Meldung zu bekommen, wieder Hinzugefügt, um die Warteschlange.
Deshalb mit asynchronen Funktionen, die wir verwenden Dinge genannt Rückrufe. Es ist ein bisschen wie ein Versprechen wahrsten Sinne des Wortes. Wie ich Versprechen, zurückzukehren, irgendwann etwas jQuery nutzt bestimmte callbacks aufgerufen
deffered.done
deffered.fail
unddeffered.always
(unter anderem). Sie können sehen, wie Sie alle hierAlso, was Sie tun müssen, ist, übergeben Sie eine Funktion, die versprochen wird, auszuführen an einem gewissen Punkt mit Daten, die an es übergeben wird.
Weil ein Rückruf nicht sofort ausgeführt, sondern zu einem späteren Zeitpunkt ist es wichtig, übergeben Sie die Referenz auf die Funktion nicht ausgeführt. so
also die meiste Zeit (aber nicht immer), kommen Sie
foo
nichtfoo()
Hoffentlich wird das Sinn macht. Wenn Sie auf Dinge wie diese, erscheinen verwirrend - ich empfehle das Lesen der Dokumentation vollständig um wenigstens ein Verständnis von es. Es wird Ihnen eine viel bessere Entwickler.
InformationsquelleAutor Matthew Brent