Javascript 異步編程-基礎篇

huaixiaoz 發布于2019-08-22 10:49 / 3560人閱讀

摘要：在前端這個領域里面，請求非常常見，相信每一個前端都寫過下面的代碼前提引入上面這段代碼中的和被稱為回調函數。多個請求希望有一個共同的回調響應繼續使用最初的方法，假設有多個請求，希望在全部完成后執行回調函數。異步編程延遲對象篇

在前端這個領域里面，ajax請求非常常見，相信每一個前端er都寫過下面的代碼：

// 前提引入jquery

$.ajax({
    type: "get",
    url: "/path/to/data",
    success: function (response) {
    
    },
    error: function (errMsg) {

    }
})

上面這段代碼中的success和error被稱為回調函數。基于js異步IO的特點，代碼的意思就是在ajax請求成功之后，執行success函數，而在ajax失敗時，執行error函數。

然而在有些情況下，業務邏輯可能需要我們產生多個success狀態下的回調函數，或者多個ajax請求同時發送，全部success狀態后執行回調，這樣的方法就顯得有些捉襟見肘。

1. 單次ajax請求有多個回調響應

// 使用上面的方法，有如下兩種業務邏輯

$.ajax({
    type: "get",
    url: "/path/to/data",
    success: function (response) {
        // todo
        
        successCallback2(response);
        successCallback3(response);
    }
})

繼續使用上面的寫法，就會讓回調進行嵌套，如果需要在successCallback2完成后繼續回調，就要一層一層的嵌套。代碼不是縱向發展，而是橫向發展，這就是js中的回調地獄。

2. 多個ajax請求希望有一個共同的回調響應

// 繼續使用最初的方法，假設有多個ajax請求，希望在全部完成后執行回調函數。

function fetchData (url, successCb, errorCb) {
    return function () {
        $.ajax({
            type: "get",
            url: url,
            success: successCb,
            error: errorCb
        });
    }
}

function successCb () {
    console.log("success");
}

function errorCb () {
    console.log("error");
}

var fetchData1 = fetchData("/path/to/data1", successCb, errorCb);
var fetchData2 = fetchData("/path/to/data2", successCb, errorCb);

如果有兩個相同的fetch data的操作，如果我們希望能夠并行操作的話，只能重寫fetchData1

var fetchData1 = fetchData("/path/to/data1", fetchData2, errorCb);

fetchData1();

這種寫法實際上是在fetchData1成功后進行fetchData2操作的，并不是嚴格意義上的并行操作，之后在fetchData2的success狀態的回調中，我們可以獲得兩次ajax請求的返回值。

這樣的代碼是不完美的，在如今大家都在追求webpack+es6+babel的技術棧時，也應該想想，如何從最基本的代碼中提升生產力和代碼的可維護性。

在發現了代碼在業務中的痛點之后，就要想辦法去解決它。好在如今前端百花齊放，這樣的問題早已有多種成熟的解決方案，接下來的幾篇文章，就由淺入深詳細的講講這些異步方案中的實現方法和代碼原理，并且每一種方法本人都實現了一個tiny版。所有文章代碼都開源在github上，如果有任何問題或者建議甚至是錯誤，都可以在github中提issue給我。歡迎大家熱烈討論。

下一篇開始，著重介紹具體從Deferred對象解決上述兩種問題，有興趣的同學繼續看下去吧。Javascript異步編程-延遲對象篇

GPU云服務器云服務器 javascript異步編程 javascript基礎編程 javascript編程基礎基礎篇

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

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

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0
javascript知識點

摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

Karrdy 2019-08-26 11:34 評論0 收藏0
JavaScript 異步編程

摘要：下面我將介紹的基本用法以及如何在異步編程中使用它們。在沒有發布之前，作為異步編程主力軍的回調函數一直被人詬病，其原因有太多比如回調地獄代碼執行順序難以追蹤后期因代碼變得十分復雜導致無法維護和更新等，而的出現在很大程度上改變了之前的窘境。前言自己著手準備寫這篇文章的初衷是覺得如果想要更深入的理解 JS，異步編程則是必須要跨過的一道坎。由于這里面涉及到的東西很多也很廣，在初學 JS 的...

lordharrd 2019-08-23 12:26 評論0 收藏0
前端基礎

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

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