备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2020-05-18 1004
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本系列文章由浅入深逐步实现 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实现原理
2020Labs
目录
相关文章
凯小默
|
6月前
|
前端开发
18 # promise 的 finally 方法实现原理
18 # promise 的 finally 方法实现原理
凯小默
24 0
2020Labs
|
前端开发 开发者
图解 Promise 实现原理（二）—— Promise 链式调用
本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。
2020Labs
930 0
2020Labs
|
设计模式 缓存 前端开发
图解 Promise 实现原理（四）—— Promise 静态方法实现
本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。
2020Labs
883 0
技术小能手
|
前端开发
Promise实现原理（附源码）
技术小能手
9647 0
龙大吉
|
1月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise？
如何处理 JavaScript 中的异步操作和 Promise？
龙大吉
15 1
m0_黎明
|
1月前
|
前端开发 JavaScript
在JavaScript中，什么是promise、怎么使用promise、怎么手写promise
在JavaScript中，什么是promise、怎么使用promise、怎么手写promise
m0_黎明
23 4
叫个什么名字
|
27天前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程：Promise 和 Async/Await
在现代的 JavaScript 开发中，异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念，重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述，读者将能够更好地理解和应用这些技术，提高自己在 JavaScript 开发中处理异步任务的能力。
叫个什么名字
18 2
爱喝汤的技术少年
|
2月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
爱喝汤的技术少年
24 0
mrq4nk6ni2neg
|
2月前
|
前端开发 JavaScript UED
JavaScript中的异步编程和Promise
【2月更文挑战第3天】在Web开发中，JavaScript是一门非常重要的编程语言，而异步编程是JavaScript中的一个关键概念。本文将介绍JavaScript中的异步编程特点，以及如何使用Promise来更加优雅地处理异步操作，帮助开发者更好地理解和应用这一技术。
mrq4nk6ni2neg
16 3
shuj
|
2月前
|
前端开发 JavaScript 数据处理
JavaScript中的异步编程及Promise对象
【2月更文挑战第3天】 传统的JavaScript编程模式在处理异步任务时常常会导致回调地狱和代码可读性较差的问题，而Promise对象的引入为解决这一问题提供了一种优雅的解决方案。本文将介绍JavaScript中的异步编程方式以及Promise对象的使用方法和优势，帮助读者更好地理解和运用异步编程技术。
shuj
20 8

热门文章

最新文章

  • 1
    【C++并发编程】std::future、std::async、std::packaged_task与std::promise的深度探索（一）
  • 2
    突破技术限制：使用 request-promise 库进行美团数据获取
  • 3
    【C++并发编程】std::future、std::async、std::packaged_task与std::promise的深度探索（二）
  • 4
    【C++并发编程】std::future、std::async、std::packaged_task与std::promise的深度探索（三）
  • 5
    JavaScript 中的异步编程：Promise 和 Async/Await
  • 6
    js开发：请解释Promise是什么，以及它如何解决回调地狱（callback hell）问题。
  • 7
    promise和async的区别是什么？
  • 8
    Promise实现原理（附源码）
  • 9
    BAT前端经典面试问题：史上最最最详细的手写Promise教程
  • 10
    使用 jQuery Deferred 和 Promise 创建响应式应用程序
  • 1
    【微信小程序】-- 使用 npm 包 - API Promise化（四十二）
    33
  • 2
    如何在爬虫过程中正确使用Promise对象和async/await？
    18
  • 3
    如何处理 JavaScript 中的异步操作和 Promise？
    15
  • 4
    async/await返回的promise被解析为undefined的可能原因
    43
  • 5
    在 Vue 中，Promise 和 async/await 有什么不同？
    16
  • 6
    如何处理 Vue 中的异步操作和 Promise？
    74
  • 7
    es6读书笔记（五）Promise
    13
  • 8
    【学习笔记】Promise
    16
  • 9
    JavaScript学习笔记(一)promise与async
    24
  • 10
    2723. 两个 Promise 对象相加
    19

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 对象和接口-2：常见用法
    • 下一篇
    阿里云oss简介和使用流程
    为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
    产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
    解决方案技术解决方案
    文档与社区文档开发者社区天池大赛培训与认证
    权益中心免费试用高校计划企业扶持计划推荐返现计划
    支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
    关注阿里云
    关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
    阿里云APP阿里云微信
    联系我们：4008013260
    法律声明Cookies政策廉正举报安全举报联系我们加入我们
    阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
    © 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
    浙公网安备 33010602009975号浙B2-20080101-4