JS常用的幾種異步流程控制

Barry_Ng 發布于2019-08-23 15:29 / 956人閱讀

摘要：雖然這個模式運行效果很不錯，但是如果嵌套了太多的回調函數，就會陷入回調地獄。當需要跟蹤多個回調函數的時候，回調函數的局限性就體現出來了，非常好的改進了這些情況。

JavaScript引擎是基于單線程 (Single-threaded) 事件循環的概念構建的，同一時刻只允許一個代碼塊在執行，所以需要跟蹤即將運行的代碼，那些代碼被放在一個任務隊列 (job queue) 中，每當一段代碼準備執行時，都會被添加到任務隊列中。每當JavaScript引擎中的一段代碼結束執行，時間循環 (event loop) 會執行隊列中的下一個任務，它是 JavaScript 引擎中的一段程序，負責監控代碼執行并管理任務隊列。

請記住，隊列中的任務會從第一個一直執行到最后一個。

事件模型

JavaScript最基礎的異步編程形式（比如點擊事件、鍵盤事件）
直到事件觸發時才執行處理程序

回調模式

回調模式與事件模型類似，異步代碼都會在未來的某個時間點執行，而這的區別是回調模式中被調用的函數是作為參數傳入的。
Node.js讀取磁盤上的文件：

readFile("example.txt", function(err, contents) {
  if(err) {
    throw err
  }
  
  console.log(contents)
})

console.log("Hi!")

調用readFile函數后，console.log("Hi!")語句會立即執行，當readFile結束執行的時候，會向任務隊列的末尾添加一個新任務，該任務包含回調函數及相應的參數。

雖然這個模式運行效果很不錯，但是如果嵌套了太多的回調函數，就會陷入回調地獄。

當需要跟蹤多個回調函數的時候，回調函數的局限性就體現出來了，Promise非常好的改進了這些情況。

Promise

Promise 對象是一個代理對象（代理一個值），被代理的值在Promise對象創建時可能是未知的。它允許你為異步操作的成功和失敗分別綁定相應的處理方法（handlers）。這讓異步方法可以像同步方法那樣返回值，但并不是立即返回最終執行結果，而是一個能代表未來出現的結果的promise對象

一個 Promise有以下幾種狀態:

pending: 初始狀態，既不是成功，也不是失敗狀態。
fulfilled: 意味著操作成功完成。
rejected: 意味著操作失敗。

pending 狀態的 Promise 對象可能觸發fulfilled 狀態并傳遞一個值給相應的狀態處理方法，也可能觸發失敗狀態（rejected）并傳遞失敗信息。當其中任一種情況出現時，Promise 對象的 then 方法綁定的處理方法（handlers ）就會被調用（then方法包含兩個參數：onfulfilled 和 onrejected，它們都是 Function 類型。當Promise狀態為fulfilled時，調用 then 的 onfulfilled 方法，當Promise狀態為rejected時，調用 then 的 onrejected 方法，所以在異步操作的完成和綁定處理方法之間不存在競爭）。

因為 Promise.prototype.then 和 Promise.prototype.catch 方法返回promise 對象，所以它們可以被鏈式調用。

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("foo");
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise1);
// expected output: [object Promise]

async/await

當調用一個 async 函數時，會返回一個 Promise 對象。當這個 async 函數返回一個值時，Promise 的 resolve 方法會負責傳遞這個值；當 async 函數拋出異常時，Promise 的 reject 方法也會傳遞這個異常值。

async 函數中可能會有 await 表達式，這會使 async 函數暫停執行，等待 Promise 的結果出來，然后恢復async函數的執行并返回解析值（resolved）。

注意， await 關鍵字僅僅在 async function中有效。如果在 async function函數體外使用 await ，你只會得到一個語法錯誤（SyntaxError）。

async function testAsync() {
    return "Hello";
}

const testResult = testAsync();
console.log(testResult); //Promise { "Hello" }

testAsync().then(v => {
    console.log(v);    // 輸出 Hello
});

//使用await
async function testAsnync1() {
    let result = await testAsync();
    console.log(result); // Hello
}

參考

Promise() | MDN
《深入理解ES6》

GPU云服務器云服務器 js的幾種數據類型 js緩存的幾種方法 js繼承的幾種方式最基本的幾種

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

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

2018年5月前端面試題

摘要：在上家公司裸辭之后，經過一段時間休整，月中下旬面試了一些公司，由于本人框架使用的是，所以面試題涉及到框架的都是，現將面試題整理一下列舉常用的特性。事件冒泡以及事件捕獲。其他前端分頁和后端分頁優缺點。包含多個子節點及孫節點，遍歷。在上家公司裸辭之后，經過一段時間休整，5月中下旬面試了一些公司，由于本人框架使用的是vue，所以面試題涉及到框架的都是vue，現將面試題整理一下： es6 ...

wwolf 2019-08-26 11:55 評論0 收藏0
2018年5月前端面試題

摘要：在上家公司裸辭之后，經過一段時間休整，月中下旬面試了一些公司，由于本人框架使用的是，所以面試題涉及到框架的都是，現將面試題整理一下列舉常用的特性。事件冒泡以及事件捕獲。其他前端分頁和后端分頁優缺點。包含多個子節點及孫節點，遍歷。在上家公司裸辭之后，經過一段時間休整，5月中下旬面試了一些公司，由于本人框架使用的是vue，所以面試題涉及到框架的都是vue，現將面試題整理一下： es6 ...

Lavender 2019-08-02 10:35 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研...

羅志環 2019-08-23 17:08 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研發體系...

isaced 2019-05-21 19:50 評論0 收藏0
前端基礎

摘要：談起閉包，它可是兩個核心技術之一異步基于打造前端持續集成開發環境本文將以一個標準的項目為例，完全拋棄傳統的前端項目開發部署方式，基于容器技術打造一個精簡的前端持續集成的開發環境。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老鳥，不論是面試求職，還是日...

graf 2019-08-21 18:38 評論0 收藏0