AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2020-05-18 1052
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。

本文首发于 vivo互联网技术 微信公众号 
链接： https://mp.weixin.qq.com/s/u8wuBwLpczkWCHx9TDt4Nw
作者：Morrain

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

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

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

  1. 图解 Promise 实现原理（一）—— 基础实现

  2. 图解 Promise 实现原理（二）—— Promise 链式调用

  3. 图解 Promise 实现原理（三）—— Promise 原型方法实现

  4. 图解 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的源码

运行结果如下：

[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的源码

不管是错误也好，异常也罢，最终都是通过 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的源码

四、【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的源码

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

同样可以通过示意动画来还原这个过程：

（Promise.finally 演示动画）点击打开>>

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

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

文章标签：
前端开发
关键词：
Promise方法
Promise实现原理
2020Labs
目录
相关文章
前端技术栈
|
7月前
|
前端开发
【面试题】吃透Promise？先实现一个再说（包含所有方法）（二）
【面试题】吃透Promise？先实现一个再说（包含所有方法）（二）
前端技术栈
46 0
前端技术栈
|
7月前
|
存储 运维 前端开发
【面试题】吃透Promise？先实现一个再说（包含所有方法）（一）
【面试题】吃透Promise？先实现一个再说（包含所有方法）（一）
前端技术栈
55 0
凯小默
|
前端开发
62 # 借用 promise 写成类的方法
62 # 借用 promise 写成类的方法
凯小默
33 0
凯小默
|
前端开发
21 # 实现 promise 的 race 方法
21 # 实现 promise 的 race 方法
凯小默
54 0
凯小默
|
前端开发
20 # 实现 promise 的 all 方法
20 # 实现 promise 的 all 方法
凯小默
53 0
凯小默
|
前端开发
18 # promise 的 finally 方法实现原理
18 # promise 的 finally 方法实现原理
凯小默
68 0
我是快乐的嘟嘟
|
1月前
|
前端开发 索引
Promise.all() 方法的参数可以是什么类型？
综上所述，`Promise.all()` 方法的参数类型较为灵活，但无论使用哪种类型的可迭代对象作为参数，其核心的异步操作处理逻辑和成功失败的判断机制都是一致的，都是为了方便地处理多个异步操作的并发执行和结果汇总。
我是快乐的嘟嘟
88 48
我是快乐的嘟嘟
|
1月前
|
存储 前端开发
除了 Promise.all()，还有哪些方法可以处理异步并发操作？
在上述示例中，`concurrentPromises` 函数接受一个Promise数组和最大并发数作为参数，通过手动控制并发执行的Promise数量，实现了对异步操作的并发控制，并在所有Promise完成后返回结果数组。
我是快乐的嘟嘟
35 6
我是快乐的嘟嘟
|
23天前
|
前端开发
Promise.allSettled()方法和Promise.race()方法有什么区别？
`Promise.allSettled()` 提供了一种更全面、更详细的方式来处理多个 `Promise`，而 `Promise.race()` 则更强调速度和竞争。我们需要根据具体的需求来选择使用哪种方法。
我是快乐的嘟嘟
87 55
我是快乐的嘟嘟
|
28天前
|
前端开发
`Promise.all()`方法在处理数组形式参数时的执行机制
Promise.all()` 提供了一种方便的方式来同时处理多个异步操作，并在它们都完成后获取到所有的结果，使得我们能够更高效地进行异步任务的组合和处理。
我是快乐的嘟嘟
128 49

热门文章

最新文章

  • 1
    Promise实现原理（附源码）
  • 2
    前端进阶|第四天从setTimeout、Promise看js 的异步机制
  • 3
    ES6(Promise)
  • 4
    推荐一本迷你中文书《JavaScript Promise迷你书（中文版）》
  • 5
    JQuery的异步回调支持 - Promise、Deferred
  • 6
    图解 Promise 实现原理（四）—— Promise 静态方法实现
  • 7
    遵循Promises/A+规范，深入分析Promise源码实现(基础篇)
  • 8
    js开发：请解释Promise是什么，以及它如何解决回调地狱（callback hell）问题。
  • 9
    Javascript标准内置对象Promise使用学习总结
  • 10
    Promise从入门到手写 | [Promise系列一]（二）
  • 1
    Promise和async/await之间有什么区别
    69
  • 2
    Golang深入浅出之-Go语言中的异步编程与Future/Promise模式
    385
  • 3
    Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.异常处理
    1026
  • 4
    【JavaScript技术专栏】JavaScript异步编程：Promise、async/await解析
    111
  • 5
    ES6：Promise使用方法解析大全
    77
  • 6
    Serverless 应用引擎操作报错合集之阿里函数计算中，出现"Unhandled promise rejection"的错误如何解决
    124
  • 7
    在JavaScript中，回调函数、Promise和async/await这三种异步处理机制的优缺点
    91
  • 8
    Promise, async, await实现异步编程，代码详解
    76
  • 9
    Promise、async和await
    67
  • 10
    [Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca
    214

    • 相关电子书

    更多
  • fibjs 模块重构从回调到协程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks