Javascript 異步編程-基礎(chǔ)篇

huaixiaoz 發(fā)布于2019-08-22 10:49 / 3566人閱讀

摘要：在前端這個(gè)領(lǐng)域里面，請(qǐng)求非常常見(jiàn)，相信每一個(gè)前端都寫過(guò)下面的代碼前提引入上面這段代碼中的和被稱為回調(diào)函數(shù)。多個(gè)請(qǐng)求希望有一個(gè)共同的回調(diào)響應(yīng)繼續(xù)使用最初的方法，假設(shè)有多個(gè)請(qǐng)求，希望在全部完成后執(zhí)行回調(diào)函數(shù)。異步編程延遲對(duì)象篇

在前端這個(gè)領(lǐng)域里面，ajax請(qǐng)求非常常見(jiàn)，相信每一個(gè)前端er都寫過(guò)下面的代碼：

// 前提引入jquery

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

    }
})

上面這段代碼中的success和error被稱為回調(diào)函數(shù)?；趈s異步IO的特點(diǎn)，代碼的意思就是在ajax請(qǐng)求成功之后，執(zhí)行success函數(shù)，而在ajax失敗時(shí)，執(zhí)行error函數(shù)。

然而在有些情況下，業(yè)務(wù)邏輯可能需要我們產(chǎn)生多個(gè)success狀態(tài)下的回調(diào)函數(shù)，或者多個(gè)ajax請(qǐng)求同時(shí)發(fā)送，全部success狀態(tài)后執(zhí)行回調(diào)，這樣的方法就顯得有些捉襟見(jiàn)肘。

1. 單次ajax請(qǐng)求有多個(gè)回調(diào)響應(yīng)

// 使用上面的方法，有如下兩種業(yè)務(wù)邏輯

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

繼續(xù)使用上面的寫法，就會(huì)讓回調(diào)進(jìn)行嵌套，如果需要在successCallback2完成后繼續(xù)回調(diào)，就要一層一層的嵌套。代碼不是縱向發(fā)展，而是橫向發(fā)展，這就是js中的回調(diào)地獄。

2. 多個(gè)ajax請(qǐng)求希望有一個(gè)共同的回調(diào)響應(yīng)

// 繼續(xù)使用最初的方法，假設(shè)有多個(gè)ajax請(qǐng)求，希望在全部完成后執(zhí)行回調(diào)函數(shù)。

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);

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

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

fetchData1();

這種寫法實(shí)際上是在fetchData1成功后進(jìn)行fetchData2操作的，并不是嚴(yán)格意義上的并行操作，之后在fetchData2的success狀態(tài)的回調(diào)中，我們可以獲得兩次ajax請(qǐng)求的返回值。

這樣的代碼是不完美的，在如今大家都在追求webpack+es6+babel的技術(shù)棧時(shí)，也應(yīng)該想想，如何從最基本的代碼中提升生產(chǎn)力和代碼的可維護(hù)性。

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

下一篇開(kāi)始，著重介紹具體從Deferred對(duì)象解決上述兩種問(wèn)題，有興趣的同學(xué)繼續(xù)看下去吧。Javascript異步編程-延遲對(duì)象篇