Comment obtenir la valeur de retour de la fonction asynchrone JavaScript

Etudiez une petite question aujourd'hui : Comment obtenir la valeur de retour de la fonction JavaScriptasynchrone ?

1. Mauvaises tentatives

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.Fonction de rappel

Ce qui apparaît n'est 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'ai été écrire 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 résout spécifiquement 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 ne donne toujours pas. le rappel, il rappelle simplement. L'emplacement a changé.

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 Nommez les avantages de l'utilisation des 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 suffisant Oui, plus tard, j'ai entendu dire qu'es7 offrait la solution ultime : async.

En tant que jeune homme qui aime apprendre, je pensais que je ne pouvais pas être laissé pour compte :

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

J'ai finalement poussé un soupir de soulagement ici.

Postscript :

Tous les exemples ci-dessus peuvent être exécutés sur le dernier Chrome.

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!