JavaScript非同期関数の戻り値インスタンス取得の詳細説​​明

この記事では、JavaScriptasynchronous関数戻り値を取得する方法についての経験と最終的な解決策を共有します。必要な友達はそれを参照してください

今日は、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

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

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

プロミスはまだコールバックを放棄していませんでしたが、コールバックの位置が変更されました。

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 を提供したと聞きました。

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

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

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