JavaScript 異步調(diào)用
問題
可修改下面的 aa() 函數(shù)，目的是在一抄后用 console.log() 輸出 want-value
function aa() {
setTimeout(function() {
return "want-value";
}, 1000);
}
但是，有額外要求：
aa() 函數(shù)可以隨意修改，但是不能有 console.log()
執(zhí)行 console.log() 語句里不能有 setTimeout 包裹
解答
也許這是個(gè)面試題，管它呢。問題的主要目的是考察對異步調(diào)用執(zhí)行結(jié)果的處理，既然是異步調(diào)用，那么 不可能同步等待異步結(jié)果，結(jié)果一定是異步的
setTimeout() 經(jīng)常用來模擬異步操作。最早，異步是通過回調(diào)來通知（調(diào)用）處理程序處理結(jié)果的
function aa(callback) {
setTimeout(function() {
if (typeof callback === "function") {
callback("want-value");
}
}, 1000);
}
aa(function(v) {
console.log(v);
});
不過回調(diào)在用于稍大型一點(diǎn)的異步應(yīng)用時(shí)，容易出現(xiàn)多層嵌套，所以之后提出了一些對其進(jìn)行“扁平”化，這一部分可以參考閑談異步調(diào)用“扁平”化。當(dāng)然 Promise 是非常流行的一種方法，并最終被 ES6 采納。用Promise 實(shí)現(xiàn)如下：
function aa() {
return new Promise(resolve => {
setTimeout(function() {
resolve("want-value");
}, 1000);
});
}
aa().then(v => console.log(v));
就這個(gè)例子來說，它和前面回調(diào)的例子大同小異。不過它會(huì)引出目前更推薦的一種方法——async/await，從 ES2017 開始支持：
function aa() {
return new Promise(resolve => {
setTimeout(function() {
resolve("want-value");
}, 1000);
});
}
async function main() {
const v = await aa();
console.log(v);
}
main();
aa() 的定義與 Promise 方法中的定義是一樣的，但是在調(diào)用的時(shí)候，使用了 await ，異步等待，等待到異步的結(jié)果之后，再使用 console.log() 對其進(jìn)行處理。
這里需要注意的是 await 只能在 async 方法中使用，所以為了使用 await 必須定義一個(gè) async 的 main 方法，并在全局作用域中調(diào)用。由于 main 方法是異步的（申明為 async)，所以如果 main() 調(diào)用之后還有其它語句，比如 console.log("hello") ，那么這一句話會(huì)先執(zhí)行。
async/await 語法讓異步調(diào)用寫起來像寫同步代碼，在編寫代碼的時(shí)候，可以避免邏輯跳躍，寫起來會(huì)更輕松。（參考： 從地獄到天堂，Node 回調(diào)向 async/await 轉(zhuǎn)變 ）
當(dāng)然，定義 main() 再調(diào)用 main() 這部分可以用 IIFE 封裝一下，
(async () => {
const v = await aa();
console.log(v);
})();
總結(jié)
以上所述是小編給大家介紹的JavaScript 異步調(diào)用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JS獲取地址欄參數(shù)的兩種方法(原生、vue),文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Websocket 向指定用戶發(fā)消息的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
簡單實(shí)現(xiàn)jquery焦點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了如何簡單實(shí)現(xiàn)jquery焦點(diǎn)圖效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
如何利用網(wǎng)頁彈出各種形式的窗口，我想大家大多都是知道些的，但那種多種多樣的彈出式窗口是怎么搞出來的，平時(shí)利用業(yè)余時(shí)間整理了一些，需要的朋友可以參考一下2012-12-12
優(yōu)雅的使用javascript遞歸畫一棵結(jié)構(gòu)樹示例代碼
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用javascript遞歸畫一棵結(jié)構(gòu)樹的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
深入淺出理解JavaScript高級定時(shí)器原理與用法
這篇文章主要介紹了JavaScript高級定時(shí)器原理與用法,結(jié)合實(shí)例形式分析了javascript重復(fù)定時(shí)器相關(guān)問題與解決方法,并描述了函數(shù)節(jié)流的原理與相關(guān)操作方法,需要的朋友可以參考下2018-08-08
全面解析Bootstrap表單使用方法（表單控件狀態(tài)）
這篇文章全面解析了Bootstrap表單的使用方法，本文重點(diǎn)介紹Bootstrap表單控件狀態(tài)的三種情況，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了javascript History對象原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法總結(jié)
最近在研究微信小程序的云開發(fā)功能,下面這篇文章主要給大家介紹了關(guān)于外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
javascript實(shí)現(xiàn)復(fù)選框選中屬性
本文給大家介紹的是一篇國外網(wǎng)友寫的博客，講解的是關(guān)于實(shí)現(xiàn)復(fù)選框選中屬性的問題，感覺非常不錯(cuò)，翻譯過來推薦給大家，希望小伙伴們能夠喜歡。2015-03-03