[ JS 進(jìn)階 ] 異步編程 promise模式的簡(jiǎn)單實(shí)現(xiàn)

svtter 發(fā)布于2019-08-21 10:35 / 968人閱讀

摘要：為了降低異步編程的復(fù)雜性，所以。難理解請(qǐng)參考的誤區(qū)以及實(shí)踐異步編程的模式異步編程的種方法

異步編程

javascript異步編程, web2.0時(shí)代比較熱門的編程方式，我們平時(shí)碼的時(shí)候也或多或少用到，最典型的就是異步ajax，發(fā)送異步請(qǐng)求，綁定回調(diào)函數(shù)，請(qǐng)求響應(yīng)之后調(diào)用指定的回調(diào)函數(shù)，沒(méi)有阻塞其他代碼的執(zhí)行。還有像setTimeout方法同樣也是異步執(zhí)行回調(diào)的方法。

如果對(duì)異步編程還不太熟悉的話，直接戳阮一峰大牛的教程，這篇文章介紹了四種異步編程的方式：

回調(diào)函數(shù)

事件監(jiān)聽(tīng)

發(fā)布/訂閱

promise模式

這幾種方式的可維護(hù)性逐級(jí)遞增，理解難度也逐級(jí)遞增。這篇總結(jié)也是針對(duì)promise模式的。

promise模式

那么多中異步編程的方式，為什么選擇promise, 因?yàn)榍懊鎺追N方式不夠靈活，用起來(lái)不夠痛快，不優(yōu)雅。為了降低異步編程的復(fù)雜性，所以promise。

promise的核心是有一個(gè)promise對(duì)象，這個(gè)對(duì)象有一個(gè)重要的then()方法, 它用于指定回調(diào)函數(shù)，如：

f1().then(f2);

promise模式在任何時(shí)刻都有三種狀態(tài)：已完成（resolved），未完成（unfulfilled），那么then()方法就是為狀態(tài)變化指定不同的回調(diào)函數(shù)，并總是返回一個(gè)promise對(duì)象，方便鏈?zhǔn)秸{(diào)用。

那promise模式下，返回的數(shù)據(jù)如何在各個(gè)回調(diào)函數(shù)之間傳播呢，通過(guò)resolve方法，你可以將一個(gè)函數(shù)的返回值作為參數(shù)傳遞給另一個(gè)函數(shù)，并且將另一個(gè)函數(shù)的返回值作為參數(shù)再傳遞給下一個(gè)函數(shù)……像一條“鏈”一樣無(wú)限的這么做下去。

代碼實(shí)現(xiàn)

通過(guò)創(chuàng)建一個(gè)Promise構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)promise模式:

//constructor
var Promise = function() {
    this.callbacks = [];
}

Promise.prototype = {
    construct: Promise,
    resolve: function(result) {
        this.complete("resolve", result);
    },

    reject: function(result) {
        this.complete("reject", result);
    },

    complete: function(type, result) {
        while (this.callbacks[0]) {
            this.callbacks.shift()[type](result);
        }
    },

    then: function(successHandler, failedHandler) {
        this.callbacks.push({
            resolve: successHandler,
            reject: failedHandler
        });

        return this;
    }
}

// test
var promise = new Promise();

var delay1 = function() {
    setTimeout(function() {
        promise.resolve("數(shù)據(jù)1");
    }, 1000);
    return promise;
};

var callback1 = function(re) {

    re = re + "數(shù)據(jù)2";
    console.log(re);
};

delay1().then(callback1)

代碼分析

我們可看到一個(gè)簡(jiǎn)單的promise對(duì)象的構(gòu)造函數(shù)的結(jié)構(gòu)：

callbacks: 用于管理回調(diào)函數(shù)

resolve: 請(qǐng)求成功時(shí)執(zhí)行的方法

reject:請(qǐng)求失敗時(shí)執(zhí)行的方法

complete: 執(zhí)行回調(diào)

then：綁定回調(diào)函數(shù)

測(cè)試：

var promise = new Promise();

var delay1 = function() {
    setTimeout(function() {
        promise.resolve("數(shù)據(jù)1");
    }, 1000);
    return promise;
};

var callback1 = function(re) {

    re = re + "數(shù)據(jù)2";
    console.log(re);
    promise.resolve(re);
};

var callback2 = function(re) {

    console.log(re + "數(shù)據(jù)3");

};

delay1().then(callback1).then(callback2);

結(jié)果：

一秒之后輸出：

分析：

//第一步
var delay1 = function() {
    setTimeout(function() {
        promise.resolve("數(shù)據(jù)1");
    }, 1000);
    return promise;
};

這個(gè)函數(shù)通過(guò)setTimeout方法，異步傳遞一個(gè)數(shù)據(jù)1，并返回一個(gè)promise對(duì)象(必須)。

//第二步
var callback1 = function(re) {

    re = re + "數(shù)據(jù)2";
    console.log(re);
    promise.resolve(re);
};

callback1和callback2都是要通過(guò)then方法注冊(cè)的回調(diào)函數(shù)，其中callback1通過(guò)resolve方法把數(shù)據(jù)往下傳遞。

//第三步
delay1().then(callback1).then(callback2);

delay1()方法執(zhí)行完，因?yàn)榉祷亓艘粋€(gè)promise對(duì)象，所以可以再調(diào)用then()方法為delay1()的setTimeout異步執(zhí)行操作指定回調(diào)函數(shù), 又因?yàn)閠hen()方法也返回的是promise對(duì)象，所以還可以再調(diào)用then方法

    //第四步
    setTimeout(function() {
        promise.resolve("數(shù)據(jù)1");
    }, 1000);

一秒之后，當(dāng)其他代碼執(zhí)行完成，開始執(zhí)行異步代碼promise.resolve("數(shù)據(jù)1");，這里調(diào)用promise的resolve()方法，指定了一個(gè)成功狀態(tài)，并把數(shù)據(jù)1作為參數(shù)。

    //第五步
    resolve: function(result) {
        this.complete("resolve", result);
    },


    //第六步：循環(huán)執(zhí)行回調(diào)，將上一個(gè)回調(diào)的結(jié)果傳遞給下一個(gè)回調(diào)
    complete: function(type, result) {
        while (this.callbacks[0]) {
            this.callbacks.shift()[type](result);
        }
    },

這其中比較難理解的就是第五，六步。

難理解請(qǐng)參考：

Promise/A的誤區(qū)以及實(shí)踐
JavaScript異步編程的Promise模式
Javascript異步編程的4種方法

GPU云服務(wù)器云服務(wù)器編程語(yǔ)言的實(shí)現(xiàn)模式 js實(shí)現(xiàn)的簡(jiǎn)單特效 promises異步 js異步編程

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85826.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

svtter

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Netfront雙11優(yōu)惠：香港VPS云服務(wù)器，僅限C區(qū)，1核2G內(nèi)存10M不限流量，月付28元起

閱讀 3707·2021-11-11 10:58
如何重啟虛擬主機(jī)-如何重啟和關(guān)閉云虛擬主機(jī)？

閱讀 2490·2021-09-22 15:43
為什么我們要熟悉這些通信協(xié)議？【精讀】

閱讀 2878·2019-08-30 15:44
移動(dòng)端頁(yè)面開發(fā)適配 rem布局原理

閱讀 2201·2019-08-30 13:08
CSS設(shè)置選中網(wǎng)頁(yè)文字時(shí)的背景和顏色

閱讀 1831·2019-08-29 17:28
CSS 魔法：學(xué)海無(wú)涯，而吾生有涯

閱讀 894·2019-08-29 10:54
提高開發(fā)效率之VS Code基礎(chǔ)配置篇

閱讀 686·2019-08-26 11:46
gulp 使用案例

閱讀 3515·2019-08-26 11:43

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

[ JS 進(jìn)階 ] 異步編程 promise模式的簡(jiǎn)單實(shí)現(xiàn)

相關(guān)文章

ES6-7

JavaScript 異步

2019前端面試題（持續(xù)更新）

2019前端面試題（持續(xù)更新）

2019前端面試題（持續(xù)更新）

發(fā)表評(píng)論

0條評(píng)論

svtter

男|高級(jí)講師

TA的文章

Netfront雙11優(yōu)惠：香港VPS云服務(wù)器，僅限C區(qū)，1核2G內(nèi)存10M不限流量，月付28元起

如何重啟虛擬主機(jī)-如何重啟和關(guān)閉云虛擬主機(jī)？

為什么我們要熟悉這些通信協(xié)議？【精讀】

移動(dòng)端頁(yè)面開發(fā)適配 rem布局原理

CSS設(shè)置選中網(wǎng)頁(yè)文字時(shí)的背景和顏色

CSS 魔法：學(xué)海無(wú)涯，而吾生有涯

提高開發(fā)效率之VS Code基礎(chǔ)配置篇

gulp 使用案例

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

[ JS 進(jìn)階 ] 異步編程 promise模式 的簡(jiǎn)單實(shí)現(xiàn)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

[ JS 進(jìn)階 ] 異步編程 promise模式的簡(jiǎn)單實(shí)現(xiàn)