So erhalten Sie den Rückgabewert einer asynchronen JavaScript-Funktion

Beschäftigen Sie sich heute mit einer kleinen Frage: Wie erhalte ich den Rückgabewert der JavaScriptasynchronen-Funktion?

1. Falsche Versuche

Mein erster Versuch, als ich nicht in die Branche eingestiegen bin:

<script>
function getSomething() {
 var r = 0;
 setTimeout(function() {
 r = 2;
 }, 10);
 return r;
}

function compute() {
 var x = getSomething();
 alert(x * 2);
}
compute();
</script>

2.Rückruffunktion

Was angezeigt wird, ist nicht 4, sondern 0. Später fand ich heraus, dass dies ein asynchrones Problem ist,

muss Callback-Technologie verwenden:

<script>
function getSomething(cb) {
 var r = 0;
 setTimeout(function() {
 r = 2;
 cb(r);
 }, 10);
}

function compute(x) {
 alert(x * 2);
}
getSomething(compute);
</script>

3.promise

Die Callback-Funktion ist wirklich eine gute Sache, und das habe ich auch getan Ich schreibe schon lange solchen Code. Übergeben Sie die Funktion, wenn Sie auf asynchron stoßen! ! Später erfuhr ich, dass es eine Sache namens Promise gibt, die speziell Probleme löst, die durch Callback-Funktionen verursacht werden. Ich habe auch etwas über Promise gelernt:

<script>
function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

function compute(x) {
 alert(x * 2);
}
getSomething().then(compute);
</script>

Promise gibt immer noch nicht Wenn Sie den Rückruf starten, wird nur zurückgerufen. Der Standort hat sich geändert.

4.generator

Später erfuhr ich etwas über den Generator und wusste, dass er die Funktionsausführung unterbrechen kann, also machte ich einen neuen Versuch:

<script>
function getSomething() {
 var r = 0;
 setTimeout(function() {
 r = 2;
 it.next(r);
 }, 10);
}

function *compute(it) {
 var x = yield getSomething();
 alert(x * 2);
}
var it = compute();
it.next();
</script>

Die synchrone Schreibmethode kann asynchrone Logik realisieren, die sich viel fortgeschrittener anfühlt.

5. Versprechen + Generator

Später habe ich gehört, dass Versprechen plus Generator die perfekte Möglichkeit ist, Flugabwehrkanonen asynchron zum Töten von Mücken einzusetzen (dieses Beispiel reicht nicht aus). Nennen Sie die Vorteile der gemeinsamen Verwendung der beiden):

<script>
function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

function *compute() {
 var x = yield getSomething();
 alert(x * 2);
}
var it = compute();
it.next().value.then(function(value) {
 it.next(value);
});
</script>

6.async

Ich dachte, das reicht aus. Ja, Später hörte ich, dass es7 die ultimative Lösung bot: asynchron.

Als junger Mann, der gerne lernt, dachte ich, dass ich nicht zurückgelassen werden darf:

<script>
function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

async function compute() {
 var x = await getSomething();
 alert(x * 2);
}
compute();
</script>

Hier atmete ich endlich auf.

Postscript:

Alle oben genannten Beispiele können auf dem neuesten Chrome ausgeführt werden.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie den Rückgabewert einer asynchronen JavaScript-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!