快捷導(dǎo)航

獲取JavaScript異步函數(shù)的返回值

更新時(shí)間：2024年07月10日 16:47:10 作者：老姚

本文給大家分享的是如何解決獲取JavaScript異步函數(shù)返回值的經(jīng)歷及最后的解決方法，有需要的小伙伴可以參考下

今天研究一個(gè)小問(wèn)題：怎么拿到JavaScript異步函數(shù)的返回值？

1.錯(cuò)誤嘗試

當(dāng)年未入行時(shí)，我的最初嘗試：

<script>
function getSomething() {
 var r = 0;
 setTimeout(function() {
 r = 2;
 }, 10);
 return r;
}

function compute() {
 var x = getSomething();
 alert(x * 2);
}
compute();
</script>

2.回調(diào)函數(shù)

彈出的不是4，而是0，后來(lái)知道這是異步的問(wèn)題，

要用回調(diào)技術(shù)來(lái)做：

<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

回調(diào)函數(shù)真是個(gè)好東西，然后一直這么寫代碼寫了很久。遇到異步就傳函數(shù)??！后來(lái)我知道有promise這一個(gè)東西，專門解決由于回調(diào)函數(shù)引起的問(wèn)題，又學(xué)會(huì)了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仍然沒(méi)有放棄回調(diào)，只是回調(diào)的位置發(fā)生了改變。

4.generator

再后來(lái)我又學(xué)會(huì)了generator，知道其有中斷函數(shù)執(zhí)行的能力，又做了新的嘗試：

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

同步的寫法，能實(shí)現(xiàn)異步的邏輯，感覺(jué)高大上了很多。

5.promise + generator

后來(lái)又聽說(shuō)promise加generator，才是異步的完美方式，趕緊用高射炮打蚊子（這個(gè)例子，還不足以說(shuō)出二者在一起用的好處）：

<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

心想這算是夠的吧，后來(lái)又聽說(shuō)es7給出了終極方案:async。

作為愛(ài)學(xué)習(xí)的少年，心想自己不能被落下：

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

到這里終于長(zhǎng)出了一口氣。

后記：

上面所有的例子，在最新chrome上都可以運(yùn)行。一個(gè)個(gè)小例子，點(diǎn)了點(diǎn)幾個(gè)名詞。

當(dāng)然也只是“點(diǎn)”而已，如果能提供讀者深入學(xué)習(xí)相關(guān)知識(shí)點(diǎn)的一個(gè)trigger，那么老姚就心滿意足了。

以上就是老姚童鞋給我們分享的全部?jī)?nèi)容了，希望對(duì)大家理解JavaScript異步函數(shù)能夠有所幫助

您可能感興趣的文章: