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

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

2020-05-18 1048
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本系列文章由浅入深逐步实现 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
目录
相关文章
前端技术栈
|
6月前
|
前端开发
【面试题】吃透Promise？先实现一个再说（包含所有方法）（二）
【面试题】吃透Promise？先实现一个再说（包含所有方法）（二）
前端技术栈
42 0
前端技术栈
|
6月前
|
存储 运维 前端开发
【面试题】吃透Promise？先实现一个再说（包含所有方法）（一）
【面试题】吃透Promise？先实现一个再说（包含所有方法）（一）
前端技术栈
51 0
凯小默
|
前端开发
62 # 借用 promise 写成类的方法
62 # 借用 promise 写成类的方法
凯小默
32 0
凯小默
|
前端开发
21 # 实现 promise 的 race 方法
21 # 实现 promise 的 race 方法
凯小默
47 0
凯小默
|
前端开发
20 # 实现 promise 的 all 方法
20 # 实现 promise 的 all 方法
凯小默
50 0
凯小默
|
前端开发
18 # promise 的 finally 方法实现原理
18 # promise 的 finally 方法实现原理
凯小默
62 0
凯小默
|
前端开发
7 # promise 的 then 方法
7 # promise 的 then 方法
凯小默
83 0
掘金防诈骗集团CEO
|
存储 前端开发
手写Promise方法
手写Promise方法
掘金防诈骗集团CEO
38 0
我是快乐的嘟嘟
|
3天前
|
前端开发 索引
Promise.all() 方法的参数可以是什么类型？
综上所述，`Promise.all()` 方法的参数类型较为灵活，但无论使用哪种类型的可迭代对象作为参数，其核心的异步操作处理逻辑和成功失败的判断机制都是一致的，都是为了方便地处理多个异步操作的并发执行和结果汇总。
我是快乐的嘟嘟
64 48
我是快乐的嘟嘟
|
6天前
|
存储 前端开发
除了 Promise.all()，还有哪些方法可以处理异步并发操作？
在上述示例中，`concurrentPromises` 函数接受一个Promise数组和最大并发数作为参数，通过手动控制并发执行的Promise数量，实现了对异步操作的并发控制，并在所有Promise完成后返回结果数组。
我是快乐的嘟嘟
22 6

热门文章

最新文章

  • 1
    Promise实现原理（附源码）
  • 2
    Promise API 简介
  • 3
    【javascript】Promise/A+ 规范简单实现 异步流程控制思想
  • 4
    前端进阶|第四天从setTimeout、Promise看js 的异步机制
  • 5
    掌握 Promise.all：优雅处理多个异步操作
  • 6
    ES6(Promise)
  • 7
    推荐一本迷你中文书《JavaScript Promise迷你书（中文版）》
  • 8
    Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.异常处理
  • 9
    图解 Promise 实现原理（四）—— Promise 静态方法实现
  • 10
    JQuery的异步回调支持 - Promise、Deferred
  • 1
    JavaScript异步编程：Promise与async/await的深入探索
    42
  • 2
    js【详解】Promise（含 Promise 的三种状态及其变化，创建 Promise， Promise.all 语法、Promise.all 实战范例、手写 Promise.all）
    563
  • 3
    【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
    66
  • 4
    前后端数据交互-----ncaught (in promise) TypeError: this.registerAPI is not a function
    35
  • 5
    解决Edge输入document.querySelector(‘video‘).playbackRate = 2.5视频无法加速的问题，‘Uncaught (in promise) TypeErro’
    288
  • 6
    js 等待接口访问成功后执行指定代码【3种方法】（含async await Promise的使用）
    201
  • 7
    前端 JS 经典：Promise 详解
    76
  • 8
    JavaScript 等待异步请求数据返回值后，继续执行代码 —— async await Promise的使用方法
    55
  • 9
    Promise 等待多个接口返回数据再执行操作
    51
  • 10
    前端开发中的异步编程：Promise 和 Async/Await 的比较与应用
    97

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云OSS设置跨域访问