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

怪我咯
リリース: 2017-06-29 10:58:19
オリジナル
1740 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!