取得JavaScript非同步函數的回傳值實例詳解-js教程-PHP中文網

取得JavaScript非同步函數的回傳值實例詳解

怪我咯

發布： 2017-06-29 10:58:19

原創

1745 人瀏覽過

本文要分享給大家的是如何解決取得JavaScript非同步函數傳回值的經驗及最後的解決方法，有需要的小夥伴可以參考下

今天研究一個小問題：怎麼拿到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

再後來我又學會了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.promise + generator

後來又聽說promise加generator，才是異步的完美方式，趕緊用高射砲打蚊子（這個例子，還不足以說出二者在一起用的好處）：

<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中文網其他相關文章！