Detaillierte Erläuterung zum Abrufen der Rückgabewertinstanz der asynchronen JavaScript-Funktion

In diesem Artikel erfahren Sie, wie Sie den Rückgabewert der JavaScriptAsynchronousFunktion erhalten. Freunde in Not können sich darauf beziehen

Studieren Sie heute eine kleine Frage: Wie erhalte ich den Rückgabewert der asynchronen JavaScript-Funktion ?

1. Falscher Versuch

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.Callback Die Funktion

erscheint nicht bei 4, sondern bei 0. Später habe ich herausgefunden, dass es sich um ein asynchrones Problem handelt, bei dem

die Callback-Technologie verwendet werden muss:

<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 Rückruffunktion ist wirklich eine gute Sache, und ich schreibe schon lange Code wie diesen. Übergeben Sie die Funktion, wenn Sie auf Asynchronität stoßen! ! Später erfuhr ich, dass es eine Sache namens Promise gibt, die speziell dafür entwickelt wurde, durch Rückruffunktionen verursachte Probleme zu lösen:

<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 hat den Rückruf immer noch nicht aufgegeben, aber das Position des Rückrufs geändert.

4.generator

Später erfuhr ich etwas über den Generator, da ich wusste, dass er die Funktionsausführung unterbrechen kann, und machte 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). Erzählen Sie mir die Vorteile der Kombination beider):

<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 fand das cool genug, aber später hörte ich, dass es7 das Nonplusultra ist Lösung wurde gefunden: async.

Als junger Mann, der gerne lernt, glaubt er, dass er 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>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung zum Abrufen der Rückgabewertinstanz der asynchronen JavaScript-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!