JavaScript非同期関数の戻り値を取得する方法-jsチュートリアル-php.cn

JavaScript非同期関数の戻り値を取得する方法

怪我咯

リリース： 2017-03-29 16:09:32

オリジナル

2915 人が閲覧しました

今日は小さな質問を勉強してみましょう: JavaScript非同期関数の戻り値を取得するにはどうすればよいですか?

1. 間違った試み

私がこの業界に入っていないとき、私の最初の試みは次のとおりでした:

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

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

ログイン後にコピー

2.コールバック関数

ポップアップは 4 ではなく 0 でした。これが非同期であることを学びました問題は、

はコールバックテクノロジーを使用して実行する必要があることです:

<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

コールバック関数は本当に良いもので、私は次のようなコードを書いています。長い間。非同期が発生した場合は関数を渡します。！その後、コールバック関数によって引き起こされる問題を具体的に解決するpromiseというものがあることを知り、promiseについて学びました:

<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はまだコールバックを放棄しませんでしたが、コールバックの位置は変わりました。

4.generator

後でジェネレーターについて学び、関数の実行を中断する機能があることを知ったので、新しい試みをしました:

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

ログイン後にコピー

同期書き込みメソッドは非同期ロジックを実現でき、高さを感じます。たくさん。

5. プロミス + ジェネレーター

後で、プロミスプラスジェネレーターが非同期にするのに最適な方法だと聞いたので、すぐに対空砲を使って蚊を殺しました (この例では、プロミスを使用する利点を説明するのに十分ではありません) 2 つ一緒):

<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

これは十分素晴らしいと思いましたが、後で es7 が究極の解決策である async を提供したと聞きました。

学ぶことが大好きな若者として、私も取り残されるわけにはいかないと思いました。

rreee

ここでようやく安堵のため息をつきました。

追記:

上記の例はすべて最新のChromeで実行できます。

以上がJavaScript非同期関数の戻り値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。