今天研究一個小問題： 怎么拿到JavaScript異步函數的返回值？
1.錯誤嘗試
當年未入行時，我的最初嘗試：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<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，后來知道這是異步的問題，
要用回調技術來做：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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，知道其有中斷函數執行的能力，又做了新的嘗試：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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，才是異步的完美方式，趕緊用高射炮打蚊子（這個例子，還不足以說出二者在一起用的好處）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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。
作為愛學習的少年，心想自己不能被落下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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異步函數能夠有所幫助
原文鏈接：http://www.qdfuns.com/notes/17398/8a2084587fbd3f6c170c1bb8a79045c6.html