從小小題目逐步走進 JavaScript 異步調用

AprilJ 發布于2019-08-21 17:15 / 980人閱讀

摘要：問題的主要目的是考察對異步調用執行結果的處理，既然是異步調用，那么不可能同步等待異步結果，結果一定是異步的經常用來模擬異步操作。

問題

原題來自 @若澤的提問。

可修改下面的 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);
})();

GPU云服務器云服務器 java中繼承小題目同步調用和異步調用實現異步調用異步調用線程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89307.html

2017-10-25 前端日報

摘要：前端日報精選中的生命周期函數淺談圖像優化強推見效表示使用率不斷升高認識屏幕加載骨架專題系列二十篇正式完結中文插件使用在中實現下拉加載數據，瀑布流，詳細操作前端學習分鐘前端國際化掘金周刊盒模型詳解掘金，從玩玩具的心態開始，到打 2017-10-25 前端日報精選 React中的async/await生命周期函數淺談Web圖像優化強推 HTTPS 見效？Google 表示 HTTPS 使...

_ipo 2019-08-21 17:15 評論0 收藏0
前后分離模型之封裝 Api 調用

摘要：和異步處理調用訪問數據采用的方式，這是一個異步過程，異步過程最基本的處理方式是事件或回調，其實這兩種處理方式實現原理差不多，都需要在調用異步過程的時候傳入一個在異步過程結束的時候調用的接口。 Ajax 和異步處理調用 API 訪問數據采用的 Ajax 方式，這是一個異步過程，異步過程最基本的處理方式是事件或回調，其實這兩種處理方式實現原理差不多，都需要在調用異步過程的時候傳入一個在異...

trilever 2019-08-21 17:40 評論0 收藏0
前端進擊的巨人（三）：從作用域走進閉包

摘要：進擊的巨人第三篇，本篇就作用域作用域鏈閉包等知識點，一一擊破。在此我們遵照的方式，暫且稱是閉包。所以，一名合格的前端，除了會用閉包，還要正確的解除閉包引用。進擊的巨人第三篇，本篇就作用域、作用域鏈、閉包等知識點，一一擊破。 showImg(https://segmentfault.com/img/bVburWd?w=1280&h=854); 作用域作用域：負責收集并維護由所有聲明的...

Vicky 2019-08-23 14:49 評論0 收藏0
資深前端面試官的建議，助你走進阿里

摘要：適當引導面試官。如果有機會來實習，如何最有效的快速成長淘寶技術部前端內部有針對新同學的前端夜校，有專門的老師授課。阿里巴巴2019前端實習生招聘還剩最后兩周，面向2019年11月1日至2020年10月31日之間畢業的同學，在這里分享下阿里前端面試考核的關鍵點： Q：在面試過程中，前端面試官如何考核面試者？A：會看同學為什么選擇前端行業？是因為算法太難？Java、C++太難？還是因為熱...

Pluser 2019-08-23 16:50 評論0 收藏0
干貨 | 走進Node.js之啟動過程剖析

摘要：具體調用鏈路如圖函數主要是解析啟動參數，并過濾選項傳給引擎。查閱文檔之后發現，通過指定參數可以設置線程池大小。原來的字節碼編譯優化還有都是通過多線程完成又繼續深入調查，發現環境變量會影響的線程池大小。執行過程如下調用執行。作者：正龍（滬江Web前端開發工程師）本文原創，轉載請注明作者及出處。隨著Node.js的普及，越來越多的開發者使用Node.js來搭建環境，也有很多公司開始把...

luck 2019-08-21 16:21 評論0 收藏0