Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielanalyse für einen asynchronen JavaScript-Aufruf

小云云
Freigeben: 2018-01-22 09:28:13
Original
1368 Leute haben es durchsucht

Dieser Artikel geht hauptsächlich Schritt für Schritt auf das Problem der asynchronen JavaScript-Aufrufe ein. Der Antwortprozess ist diesem Artikel beigefügt. Ich hoffe, er kann jedem helfen, ihn besser zu meistern Asynchrone JavaScript-Aufrufe.

Problem

Sie können die aa()-Funktion unten ändern. Der Zweck besteht darin, console.log() zu verwenden, um den gewünschten Wert auszugeben


function aa() {
  setTimeout(function() {
    return "want-value";
  }, 1000);
}
Nach dem Login kopieren

Es gibt jedoch zusätzliche Anforderungen:

aa()-Funktion kann nach Belieben geändert werden, es kann jedoch keine console.log() geben

Führen Sie console.log aus. In der ()-Anweisung darf kein setTimeout-Paket enthalten sein

Antwort

Vielleicht ist das eine Interviewfrage, was auch immer. Der Hauptzweck der Frage besteht darin, die Verarbeitung der Ergebnisse der asynchronen Aufrufausführung zu untersuchen. Da es sich um einen asynchronen Aufruf handelt, ist es nicht möglich, synchron auf das Ergebnis zu warten.

setTimeout(). wird häufig zur Simulation asynchroner Vorgänge verwendet. Zunächst erfolgte die asynchrone Benachrichtigung (Aufruf) der Verarbeitungsergebnisse des Handlers über Rückrufe


function aa(callback) {
  setTimeout(function() {
    if (typeof callback === "function") {
      callback("want-value");
    }
  }, 1000);
}
aa(function(v) {
  console.log(v);
});
Nach dem Login kopieren

Wenn Rückrufe jedoch in größeren asynchronen Anwendungen verwendet werden, treten viele Fehler auf Die Ebenen sind verschachtelt, daher wurden später einige Vorschläge gemacht, sie zu „flachen“. In diesem Teil können Sie sich auf die „Abflachung“ asynchroner Chat-Aufrufe beziehen. Natürlich ist Promise eine sehr beliebte Methode und wurde schließlich von ES6 übernommen. Verwenden Sie Promise, um es wie folgt zu implementieren:


function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
aa().then(v => console.log(v));
Nach dem Login kopieren

Was dieses Beispiel betrifft, ähnelt es dem vorherigen Callback-Beispiel. Allerdings wird es derzeit zu einer empfohleneren Methode führen – async/await, unterstützt ab ES2017:


function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
async function main() {
  const v = await aa();
  console.log(v);
}
main();
Nach dem Login kopieren

aa() Definition und Promise-Methode Die Definition ist die Dasselbe, aber beim Aufruf wird „await“ verwendet, um asynchron zu warten. Nach dem Warten auf das asynchrone Ergebnis wird console.log() verwendet, um es zu verarbeiten.

An dieser Stelle ist zu beachten, dass „await“ nur in asynchronen Methoden verwendet werden kann. Um „await“ zu verwenden, müssen Sie also eine asynchrone Hauptmethode definieren und diese im globalen Bereich aufrufen. Da die Hauptmethode asynchron ist (als asynchron deklariert), wird diese Anweisung zuerst ausgeführt, wenn nach dem Aufruf von main () andere Anweisungen vorhanden sind, z. B. console.log ("hello").

Die Async/Await-Syntax macht das Schreiben asynchroner Aufrufe wie das Schreiben von synchronem Code. Beim Schreiben von Code können Sie logische Sprünge vermeiden und das Schreiben vereinfachen. (Referenz: Von der Hölle zum Himmel, Node-Callback ändert sich zu async/await)

Natürlich kann die Definition von main() und der anschließende Aufruf von main() mit IIFE gekapselt werden,


(async () => {
  const v = await aa();
  console.log(v);
})();
Nach dem Login kopieren

Verwandte Empfehlungen:

PHP-Methode zur Implementierung asynchroner Multithreading-Aufrufe

Informationen zur asynchronen Aufrufmethode von JavaScript

Asynchrone PHP-Aufrufimplementierungsmethode

Das obige ist der detaillierte Inhalt vonBeispielanalyse für einen asynchronen JavaScript-Aufruf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage