建站教程 2022-10-16

图解 Promise 实现原理（三）：Promise 原型方法实现(JavaScript链式调用原理与实现方法讲解)

文章目录

1 图解 Promise 实现原理（三）：Promise 原型方法实现
2 前言
3 【错误处理】
4 【异常处理】
5 【Finally方法】
6 推荐JavaScript经典实例学习资料文章
7 JavaScript链式调用原理与实现方法讲解

图解 Promise 实现原理（三）：Promise 原型方法实现

作者：Morrain

转发链接：https://mp.weixin.qq.com/s/u8wuBwLpczkWCHx9TDt4Nw

前言

Promise 是异步编程的一种解决方案，它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。更多关于 Promise 的介绍请参考阮一峰老师的 ES6入门之 Promise 对象。

很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。

本系列文章由如下几个章节组成：

图解 Promise 实现原理（一）：基础实现

图解 Promise 实现原理（二）：Promise 链式调用

图解 Promise 实现原理（三）：Promise 原型方法实现（本篇）

图解 Promise 实现原理（四）：Promise 静态方法实现

上一节中，实现了 Promise 的链式调用。链式调用是 Promise 的难点，更是重点。截至目前，Promise 的实现如下：

class Promise { callbacks = []; state = 'pending';//增加状态 value = null;//保存结果 constructor(fn) { fn(this._resolve.bind(this)); } then(onFulfilled) { return new Promise(resolve => { this._handle({ onFulfilled: onFulfilled || null, resolve: resolve }); }); } _handle(callback) { if (this.state === 'pending') { this.callbacks.push(callback); return; } //如果then中没有传递任何东西 if (!callback.onFulfilled) { callback.resolve(this.value); return; } var ret = callback.onFulfilled(this.value); callback.resolve(ret); } _resolve(value) { if (value && (typeof value === 'object' || typeof value === 'function')) { var then = value.then; if (typeof then === 'function') { then.call(value, this._resolve.bind(this)); return; } } this.state = 'fulfilled';//改变状态 this.value = value;//保存结果 this.callbacks.forEach(callback => this._handle(callback)); } }

（滑动可查看）

本节主要介绍 Promise 原型方法的实现，包括 catch、finally 以及 rejected 状态等的实现。

【错误处理】

之前为了讲解原理，只是实现了 onFulfilled ，对于 Promise 来说，除了成功还有失败，在失败时，要标记 Promise 的状态为 rejected，并执行注册的 onRejected。如下Demo所示：

/** * 模拟异常异步请求 * @param {*} url * @param {*} s * @param {*} callback */ const mockAjax = (url, s, callback) => { setTimeout(() => { callback(url + '异步请求耗时' + s + '秒', '出错了!'); }, 1000 * s) }


//demo reject

new Promise((resolve, reject) => {
    mockAjax('getUserId', 1, function (result, error) {

        if (error) {

            reject(error)

        } else {

            resolve(result);

        }

    })

}).then(result => { console.log(result); }, error => { console.log(error); });

（滑动可查看）

有了之前处理 fulfilled 状态的经验，支持错误处理变得很容易，只需要在注册回调、处理状态变更上都要加入新的 reject 逻辑。

//完整的实现+reject class Promise { callbacks = []; state = 'pending';//增加状态 value = null;//保存结果 constructor(fn) { fn(this._resolve.bind(this), this._reject.bind(this)); } then(onFulfilled, onRejected) { return new Promise((resolve, reject) => { this._handle({ onFulfilled: onFulfilled || null, onRejected: onRejected || null, resolve: resolve, reject: reject }); }); } _handle(callback) { if (this.state === 'pending') { this.callbacks.push(callback); return; }


        let cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected;
        if (!cb) {//如果then中没有传递任何东西

            cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;

            cb(this.value);

            return;

        }
        let ret = cb(this.value);

        cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;

        cb(ret);

    }

    _resolve(value) {
        if (value && (typeof value === 'object' || typeof value === 'function')) {

            var then = value.then;

            if (typeof then === 'function') {

                then.call(value, this._resolve.bind(this), this._reject.bind(this));

                return;

            }

        }

this.state = 'fulfilled';//改变状态 this.value = value;//保存结果 this.callbacks.forEach(callback => this._handle(callback)); } _reject(error) { this.state = 'rejected'; this.value = error; this.callbacks.forEach(callback => this._handle(callback)); } }

（滑动可查看）

demo-reject的源码

地址：https://repl.it/@morrain2016/demo-reject

运行结果如下：

[Promse-1]:constructor [Promse-1]:then [Promse-2]:constructor [Promse-1]:_handle state= pending [Promse-1]:_handle callbacks= [ { onFulfilled: [Function], onRejected: [Function], resolve: [Function], reject: [Function] } ] => Promise { callbacks: [], name: 'Promse-2', state: 'pending', value: null } [Promse-1]:_reject [Promse-1]:_reject value= 出错了! [Promse-1]:_handle state= rejected 出错了! [Promse-2]:_reject [Promse-2]:_reject value= undefined

（滑动可查看）

【异常处理】

刚刚介绍了错误处理，是指在 Promise 的构造函数中发现的错误，并通过 reject 通知的。如果在执行 onFulfilled 或者 onRejected 时，出现了异常，该如何处理呢？对于这类异常，处理也很简单，可以使用 try-catch 捕获错误，然后将相应的 Promise 状态设置为 rejected 状态。改造_handle方法如下：

_handle(callback) { if (this.state === 'pending') { this.callbacks.push(callback); return; }


        let cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected;
        if (!cb) {//如果then中没有传递任何东西

            cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;

            cb(this.value);

            return;

        }
        let ret;
        try {

            ret = cb(this.value);

            cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;

        } catch (error) {

            ret = error;

            cb = callback.reject

        } finally {

            cb(ret);

        }

}

（滑动可查看）

demo-error的源码

地址：https://repl.it/@morrain2016/demo-error

不管是错误也好，异常也罢，最终都是通过 reject 实现的，可见最终对于错误以及异常的处理，都可以通过 then 中的 onRejected 来处理。所以单独增加一个 catch 方法，它是 .then(null, onRejected) 的别名。如下：

then(onFulfilled, onRejected) { return new Promise((resolve, reject) => { this._handle({ onFulfilled: onFulfilled || null, onRejected: onRejected || null, resolve: resolve, reject: reject }); }); } catch(onError){ return this.then(null, onError); }

（滑动可查看）

demo-catch的源码

地址：https://repl.it/@morrain2016/demo-catch

【Finally方法】

在实际应用的时候，我们很容易会碰到这样的场景，不管 Promise 最后的状态如何，都要执行某些操作(onDone)。例如服务器使用 Promise 处理请求，然后使用finally方法关掉服务器:

server.listen(port) .then(function () { // do something }) .catch(error=>{ // handle error }) .finally(server.stop);

（滑动可查看）

本质上，因为它是 then 的一种变形。上面的 demo 的效果等价于如下的代码：

server.listen(port) .then(function () { // do something }) .catch(error=>{ // handle error }) .then(server.stop, server.stop);

（滑动可查看）

通过上面的分析，finally看上去可以这么实现：

finally(onDone){ return this.then(onDone, onDone); }

（滑动可查看）

但是由于 finally 方法的 onDone 不关心 Promise 的状态到底是 fulfilled 还是 rejected ，所以onDone 里的操作，应该是与状态无关的，并且不应该有任何参数。

如果使用 then 来实现就不符合 Promise 规范中关于《Why not .then(f, f)?》的说明。一来 onDone 有参数，二来当 onDone 返回一个Promise时，会改变 finally 返回的Promise的值状态。

根据规范，finally实现如下：

catch(onError) { return this.then(null, onError); } finally(onDone) { if (typeof onDone !== 'function') return this.then(); let Promise = this.constructor; return this.then( value => Promise.resolve(onDone()).then(() => value), reason => Promise.resolve(onDone()).then(() => { throw reason }) ); }

（滑动可查看）

demo-finally的源码

地址：https://repl.it/@morrain2016/demo-finally

new Promise((resolve, reject) => { setTimeout(() => { resolve('success'); }, 1000) }).finally(() => { console.log('onDone') })

（滑动可查看）

对于上面的示例，执行结果如下：

[Promse-1]:constructor [Promse-1]:finally [Promse-1]:then [Promse-2]:constructor [Promse-1]:_handle state= pending [Promse-1]:_handle callbacks= [ { onFulfilled: [Function], onRejected: [Function], resolve: [Function], reject: [Function] } ] => Promise { callbacks: [], name: 'Promse-2', state: 'pending', value: null } [Promse-1]:_resolve [Promse-1]:_resolve value= success [Promse-1]:_handle state= fulfilled onDone Promise::resolve [Promse-3]:constructor [Promse-3]:_resolve [Promse-3]:_resolve value= undefined [Promse-3]:then [Promse-4]:constructor [Promse-3]:_handle state= fulfilled [Promse-4]:_resolve [Promse-4]:_resolve value= success [Promse-2]:_resolve [Promse-2]:_resolve value= Promise { callbacks: [], name: 'Promse-4', state: 'fulfilled', value: 'success' } [Promse-4]:then [Promse-5]:constructor [Promse-4]:_handle state= fulfilled [Promse-2]:_resolve [Promse-2]:_resolve value= success [Promse-5]:_resolve [Promse-5]:_resolve value= undefined

（滑动可查看）

finally 的实现看起来简单，实际理解还是比较困难，对于上面的实例，中间其实有5个 Promise实例生成。如下图所示：

原型方法就介绍这么多，下一节介绍两个静态方法

JavaScript链式调用原理与实现方法讲解

本文实例讲述了JavaScript链式调用原理与实现方法。分享给大家供大家参考，具体如下：

1、什么是链式调用？

这个很容易理解，例如

$(\'text\').setStyle(\'color\', \'red\').show();

一般的函数调用和链式调用的区别：链式调用完方法后，return this返回当前调用方法的对象。

首先，我们先来看看一般函数的调用方式

（1）先创建一个简单的类

//创建一个bird类

function Bird(name) {

this.name=name;

this.run=function () {

document.write(name+\" \"+\"start run;\");

}

this.stopRun=function () {

document.write(name+\" \"+\"start run;\");

}

this.sing=function () {

document.write(name+\" \"+\"start sing;\");

}

this.stopSing=function () {

document.write(name+\" \"+\"start stopSing;\");

}

（2）使用方式：一般的调用方式

var bird=new Bird(\"测试\");

bird.run();

birdbird.sing();

bird.stopSing();

bird.stopRun();<br>

//结果为;测试 start run;测试 start sing;测试 start stopSing;测试 start run;

（3）总结，该种方式有一个弊端就是：多次重复使用一个对象变量

然后，我们再来看看将上述改成链式调用的格式

（1）在创建的简单类中加上return this，如下

//创建一个bird类

function Bird(name) {

this.name=name;

this.run=function () {

document.write(name+\" \"+\"start run;\");

return this;// return this返回当前调用方法的对象。

}

this.stopRun=function () {

document.write(name+\" \"+\"start run;\");

return this;

}

this.sing=function () {

document.write(name+\" \"+\"start sing;\");

return this;

}

this.stopSing=function () {

document.write(name+\" \"+\"start stopSing;\");

return this;

}

（2）使用链式调用（连缀的方式）

var bird=new Bird(\"测试\");
bird.run().sing().stopSing().stopRun();//结果为;测试 start run;测试 start sing;测试 start stopSing;测试 start run;

（3）总结此种方式的调用结果与一般的调用方式产生的结果一样，优点是：链式调用这种风格有助于简化代码的编写工作，让代码更加简洁、易读，同时也避免多次重复使用一个对象变量

2.模仿jquery的链式调用

第一步，定义一个含参数的空对象

(function(){

//下划线：表示私有变量的写法

function _$(els) { };//有参数的空对象

})()//程序启动的时候里面的代码直接执行了

第二步，准备方法在_$上定义一个onrReady方法

(function(){

//第一步，下划线：表示私有变量的写法

function _$(els) { };//有参数的空对象<br>

//第二步，准备方法在_$上定义一个onrReady方法

_$.onrReady=function (fn) {

//按要求把对象（_$）注册到window对象上

//对外开放的接口

window.$=function () {

return new _$(arguments);//传递相应的方法调用参数返回一可以使用function类原型上的方法的对象（$(\"\")=_$(参数)）

}

fn();

}

})()

第三步，为了类（Function）能扩展函数，我们定义一个它的静态函数

Function.prototype.method=function (name,fn) {//（函数名称，函数本身）

this.prototype[name]=fn;

return this;//链式调用关键

};//这个函数的意思：为function对象增加函数，会用链式调用，链式调用有两个参数name,和fn

第四步，扩展类的相应方法链式的对象增加jquery库提供的操作函数

(function(){

//下划线：表示私有变量的写法

function _$(els) { };//有参数的空对象

//第二步，准备方法在_$上定义一个onrReady方法

_$.onrReady=function (fn) {

//按要求把对象（_$）注册到window对象上

//对外开放的接口

window.$=function () {

return new _$(arguments);//传递相应的方法调用参数返回一可以使用function类原型上的方法的对象（$(\"\")=_$(参数)）

}

fn();

}<br> //第四步

//扩展类的相应方法链式的对象增加jquery库提供的操作函数

_$.method(\"AddEvent\",function (type,fn) {//_$本身是一个function要继承原型链上的东西。

fn();

}).method(\"getEvent\",function (fn,e) {

fn();

})

})()

第五步，使用，需要调用_$.onReady方法才可以返回对象使用从function类继承而来的原型上的方法

(function () {

// （1）下划线：表示私有变量的写法

function _$(els) { };//有参数的空对象

//（2）准备方法在_$上定义一个onrReady方法

// window.$=_$;

_$.onrReady=function (fn) {

//按要求把对象（_$）注册到window对象上在任何地方都可以使用

//对外开放的接口

window.$=function () {//window 上先注册一个全局变量与外界产生关系

return new _$(arguments);//传递相应的方法调用参数返回一可以使用function类原型上的方法的对象（$(\"\")=_$(参数)）

}

fn();

}

//（4）扩展类的相应方法链式的对象增加jquery库提供的操作函数

_$.method(\"AddEvent\",function (type,fn) {//_$本身是一个function要继承原型链上的东西。

fn();

}).method(\"getEvent\",function (fn,e) {

fn();

});

//第五步，开始使用，需要调用_$.onready方法才可以返回对象使用从function类继承而来的原型上的方法

_$.onrReady(function () {//$是绑定在Windows上的

$(\"\").AddEvent(\"click\",function () {

alert(\"click\")

})

})()

上述综合的代码为

//第三步，为了类（Function）能扩展函数，我们定义一个它的静态函数

Function.prototype.method=function (name,fn) {//（函数名称，函数本身）

this.prototype[name]=fn;

return this;//链式调用关键

};//这个函数的意思：为function对象增加函数，会用链式调用，链式调用有两个参数name,和fn

(function () {

// 第一步，下划线：表示私有变量的写法

function _$(els) { };//有参数的空对象

//第二步，准备方法在_$上定义一个onrReady方法

// window.$=_$;

_$.onrReady=function (fn) {

//按要求把对象（_$）注册到window对象上

//对外开放的接口

window.$=function () {

return new _$(arguments);//传递相应的方法调用参数返回一可以使用function类原型上的方法的对象（$(\"\")=_$(参数)）

}

fn();

}

//第四步，扩展类的相应方法链式的对象增加jquery库提供的操作函数

_$.method(\"AddEvent\",function (type,fn) {//_$本身是一个function要继承原型链上的东西，所以可以使用method方法

fn();

}).method(\"getEvent\",function (fn,e) {

fn();

});

//第五步，开始使用，需要调用_$.onready方法才可以返回对象使用从function类继承而来的原型上的方法

_$.onrReady(function () {//$是绑定在Windows上的

$(\"\").AddEvent(\"click\",function () {

alert(\"click\")

})

})()

上述是将$绑定到window上的操作，如果我们想将$绑定到一个指定对象上我们可以这通过改变上述的第二步和第五步如下，

/**

* Created by 与你在巅峰相会 on 2017/10/12.

//第三步，为了类（Function）能扩展函数，我们定义一个它的静态函数

Function.prototype.method=function (name,fn) {//（函数名称，函数本身）

this.prototype[name]=fn;

return this;//链式调用关键

};//这个函数的意思：为function对象增加函数，会用链式调用，链式调用有两个参数name,和fn

(function () {

// 第一步，下划线：表示私有变量的写法

function _$(els) { };//有参数的空对象

//第二步，准备方法在_$上定义一个onrReady方法

_$.onReady=function (obj,fn) {//obj传进来的对象

if(obj){

//按要求把对象（_$）注册到window对象上

//对外开放的接口

obj.$=function () {

return new _$(arguments);//传递相应的方法调用参数返回一可以使用function类原型上的方法的对象（$(\"\")=_$(参数)）

}

}else {

//按要求把对象（_$）注册到window对象上

//对外开放的接口

window.$=function () {

return new _$(arguments);//传递相应的方法调用参数返回一可以使用function类原型上的方法的对象（$(\"\")=_$(参数)）

}

fn();

}

//第四步，扩展类的相应方法链式的对象增加jquery库提供的操作函数

_$.method(\"AddEvent\",function (type,fn) {//_$本身是一个function要继承原型链上的东西，可以直接使用method方法

fn();

}).method(\"getEvent\",function (fn,e) {

fn();

});

//第五步，开始使用，需要调用_$.onready方法才可以返回对象使用从function类继承而来的原型上的方法

var com={};

_$.onReady(com,function () {//$是绑定在Windows上的

com.$(\"\").AddEvent(\"click\",function () {

alert(\"click\")

})

})()

自己画一个图简单理解一下上面的过程及思路：

小程序

由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 图解 Promise 实现原理（三）：Promise 原型方法实现(JavaScript链式调用原理与实现方法讲解)

分享到：