解決怎么拿到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>

到這里終于長出了一口氣。

后記：

上面所有的例子，在最新chrome上都可以運行。一個個小例子，點了點幾個名詞。

當然也只是“點”而已，如果能提供讀者深入學習相關知識點的一個trigger，那么老姚就心滿意足了。

參考資料：

• 《你不知道的javascript中卷》
• 《ECMAScript 6 入門》阮一峰

來自： 解決怎么拿到JavaScript異步函數的返回值？