Explication détaillée de l'obtention de l'instance de valeur de retour de la fonction asynchrone JavaScript

Cet article partage avec vous l'expérience et la solution finale sur la façon d'obtenir la valeur de retour de JavaScriptFonction asynchroneLes amis dans le besoin peuvent s'y référer

. Étudiez une petite question aujourd'hui : Comment obtenir la valeur de retour

de la fonction asynchrone JavaScript ?

1. Mauvaise tentative

Ma première tentative alors que je ne suis pas entré dans l'industrie :

<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 La fonction

apparaît non pas 4, mais 0. Plus tard, j'ai découvert qu'il s'agissait d'un problème asynchrone

doit utiliser la technologie de rappel :

.

<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

La fonction de rappel est vraiment une bonne chose, et j'écris du code comme celui-ci depuis longtemps. Passez la fonction en cas d'asynchronie ! ! Plus tard, j'ai appris qu'il existe une chose appelée promise, qui est spécifiquement conçue pour résoudre les problèmes causés par les fonctions de rappel. J'ai également découvert la promesse :

<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>

la promesse n'a toujours pas abandonné le rappel, mais la promesse. la position du rappel a été modifiée.

4.generator

Plus tard, j'ai découvert le générateur et je savais qu'il avait la capacité d'interrompre l'exécution d'une fonction, j'ai donc fait une nouvelle tentative :

<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>

La méthode d'écriture synchrone peut réaliser une logique asynchrone, qui semble beaucoup plus avancée.

5. promesse + générateur

Plus tard, j'ai entendu dire que promesse plus générateur est le moyen idéal pour utiliser de manière asynchrone des canons anti-aériens pour tuer les moustiques (cet exemple n'est pas suffisant Dites-moi les avantages d'utiliser les deux ensemble) :

<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

Je pensais que c'était assez cool, mais plus tard, j'ai entendu dire que es7 L'ultime La solution a été trouvée : async.

En tant que jeune homme qui aime apprendre, il pense qu'il ne peut pas être laissé pour compte :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!