可修改下面的aa()
函數,目的是在一秒後用console.log()
輸出want-value
function aa() { setTimeout(function() { return "want-value"; }, 1000); }
但是,有額外需求:
aa()
函數可以隨意修改,但是不能有console. log()
執行console.log()
語句裡不能有setTimeout
包裹
也許這是個面試題,管它呢。問題的主要目的是考察對非同步調用執行結果的處理,既然是非同步調用,那麼不可能同步等待非同步結果,結果一定是非同步的
setTimeout()
常用來模擬非同步操作。最早,非同步是透過回呼來通知(呼叫)處理程序處理結果的
function aa(callback) { setTimeout(function() { if (typeof callback === "function") { callback("want-value"); } }, 1000); } aa(function(v) { console.log(v); });
不過回呼在用於稍大型一點的非同步應用時,容易出現多層嵌套,所以之後提出了一些對其進行「扁平」化,這一部分可以參考閒聊非同步呼叫「扁平」化。當然 Promise 是非常流行的一種方法,並最終被 ES6 採納。用 Promise 實作如下:
function aa() { return new Promise(resolve => { setTimeout(function() { resolve("want-value"); }, 1000); }); } aa().then(v => console.log(v));
就這個例子來說,它和前面回呼的例子大同小異。不過它會引出目前更推薦的一種方法-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 方法中的定義是一樣的,但是在呼叫的時候,使用了await
,非同步等待,等待到非同步的結果之後,再使用console.log()
來處理。
這裡要注意的是await
只能在async
方法中使用,所以為了使用await
必須定義一個async
的main 方法,並在全域作用域中呼叫。由於main 方法是異步的(申明為async),所以如果main()
呼叫之後還有其它語句,例如console.log("hello")
,那麼這一句話會先執行。
async/await 語法讓非同步呼叫寫起來像寫同步程式碼,在寫程式碼的時候,可以避免邏輯跳躍,寫起來會更輕鬆。 (參考:從地獄到天堂,Node 回呼向async/await 轉變)
當然,定義main()
再呼叫main()
這部分可以用IIFE封裝一下,
(async () => { const v = await aa(); console.log(v); })();
以上是關於JavaScript 非同步呼叫方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!