浅析Promise原理

Promise原型对象

在浏览器控制台输入如下代码，可以看到Promise原型对象信息。

var p = new Promise(()=>{});
console.log(p)

Promise原型上有catch、finally、then等方法。同时Promise内部维护了两个属性值status和value

Promise构造方法

再看Promise的构造方法，如下图

构造函数有all、allSettled、finally、race、reject、resolve等方法。

简单实现

构造函数实现总结：

构造函数接受一个函数executor，并立即执行；
executor函数接受两个参数，一个是resolve函数，一个是rejected函数，用于后续回调执行；
promise对象的then方法中的第一个参数（函数）是状态变为fulfilled时的回调。
resolve函数被调用时，会触发then方法中的回调函数的指定。

const PENDING = 'pending';
const FULFILLED = 'fullfilled';
const REJECTED = 'rejected';
function Promise(executor) {this.status = PENDING;this.value = undefined;this.onResolvedCallback = []; //成功状态下的回调函数集合this.onRejectedCallback = [];function resolve(value) {};function reject() {};executor(resolve, reject);
}

const PENDING = 'pending';
const FULFILLED = 'fullfilled';
const REJECTED = 'rejected';
function Promise(executor) {this.status = PENDING;this.value = undefined;this.onResolvedCallback = []; //成功状态下的回调函数集合this.onRejectedCallback = [];function resolve(value) {if(this.status === PENDING) {this.status = FULFILLED;this.value = value;// 触发后续then方法中的回调方法执行onRejectedCallback.forEach(onResolved => {onResolved(value)});}};function reject() {};try { // 考虑到执行executor的过程中有可能出错，所以我们用try/catch块给包起来，并且在出错后以catch到的值reject掉这个Promiseexecutor(resolve, reject) // 执行executor} catch(e) {reject(e)}
}
``

参考

https://www.jianshu.com/p/b4f0425b22a1
https://github.com/xieranmaya/blog/issues/3

浅析Promise原理相关推荐

浅析bootstrap原理及优缺点
网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统网格系统的实现原理,是通过定义容器 ...
面试题promise原理
面试题Promise原理在Promise的内部,有一个状态管理器的存在,有三种状态:pending.fulfilled.rejected. (1) promise 对象初始化状态为 pending. ...
从零开始，手写完整的Promise原理！
珠峰十年深度沉淀,最具诚意与深度的课程限时免费开放,带你从0到1完美诠释异步编程,并手写一个完整的promise原理! [扫码免费参加,限200人] (名额有限,扫描上方二维码立即参加!) 历史学员 ...
手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理
[本系列内容直达:] 手把手带你学习Odoo OWL组件开发(1):认识 OWL 手把手带你学会Odoo OWL组件开发(2):OWL的使用手把手带你学会Odoo OWL组件开发(3):核心内容指南 ...
浅析Promise用法
浅析Promise用法要理解Promise要知道没有Promise的回调地狱如何插入一段漂亮的代码片 Promise语法与then的用法所谓Promise,简单说就是一个容器,里面保存着某个未来 ...
js中promise原理及手动基本实现_V1
前言这几天面试过程,有个面试官突然跟我抠上了promise的实现原理,虽然有所准备,但是没能清晰地说出其中的原理,所以有点遗憾!!!,但是事已至此,只能默默去查了相关资料深入其中了解一番.因此就有了 ...
Promise原理详解及实现方式
在异步编程中,许多操作都会放在回调函数(callback)中,有时候需要拿到上一个异步操作的返回值再做第二次请求比如: asyncOperation(data => {// 处理 `data` ...
ES6 Promise原理
ES6 Promise原理一.Promise是什么二.为什么会有Promise 1.回调地狱 + 异步同步事件调用顺序带来的双重伤害 2.回调事件的分离三.Promise的三种状态 1.reso ...
promise原理与async 及 await
promise原理与async 及 await 1.1 Promise是一个构造函数 1.2 Promise优缺点 1.3 async 及 await 1.4 相较于 Promise,async/aw ...

浅析Promise原理

Promise原型对象

Promise构造方法

简单实现

参考

浅析Promise原理相关推荐

最新文章

热门文章