Heim > Web-Frontend > js-Tutorial > Hauptteil

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

怪我咯
Freigeben: 2017-06-29 10:58:19
Original
1743 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

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