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

Barry_Ng 發(fā)布于2019-08-23 15:29 / 1023人閱讀

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

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

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

事件模型

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

回調模式

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

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

console.log("Hi!")

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

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

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

Promise

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

一個 Promise有以下幾種狀態(tài):

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

pending 狀態(tài)的 Promise 對象可能觸發(fā)fulfilled 狀態(tài)并傳遞一個值給相應的狀態(tài)處理方法，也可能觸發(fā)失敗狀態(tài)（rejected）并傳遞失敗信息。當其中任一種情況出現(xiàn)時，Promise 對象的 then 方法綁定的處理方法（handlers ）就會被調用（then方法包含兩個參數(shù)：onfulfilled 和 onrejected，它們都是 Function 類型。當Promise狀態(tài)為fulfilled時，調用 then 的 onfulfilled 方法，當Promise狀態(tài)為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 函數(shù)時，會返回一個 Promise 對象。當這個 async 函數(shù)返回一個值時，Promise 的 resolve 方法會負責傳遞這個值；當 async 函數(shù)拋出異常時，Promise 的 reject 方法也會傳遞這個異常值。

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

注意， await 關鍵字僅僅在 async function中有效。如果在 async function函數(shù)體外使用 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的幾種數(shù)據(jù)類型 js緩存的幾種方法 js繼承的幾種方式最基本的幾種

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

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

2018年5月前端面試題

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

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

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

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

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

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

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

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

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

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