promise polyfill解析
https://github.com/taylorhakes/promise-polyfill
Promise构造器
function Promise(fn) {if (!(this instanceof Promise))throw new TypeError('Promises must be constructed via new');if (typeof fn !== 'function') throw new TypeError('not a function');/*** 0: pending* 1: resolve* 2: reject* 3: res(p)中p为promise类型*/this._state = 0;/** 是否处理完成 */this._handled = false;/** 当前promise的value值 */this._value = undefined;/** 保存obj,obj包含3个参数:* 当前promise的onFulfilled和onRejected回调方法* 当前promise的完成后要执行的promise*/this._deferreds = [];
doResolve(fn, this);
}
doResolve
执行Promise构造时的参数。且如果执行出错,则直接reject
new Promise((res, rej) => {setTimeout(() => {res();}, 0)
});
function doResolve(fn, self) {var done = false;try {fn(// 上面代码中res()时执行function(value) {if (done) return;done = true;resolve(self, value);},// 上面代码中rej()时执行function(reason) {if (done) return;done = true;reject(self, reason);});} catch (ex) {if (done) return;done = true;reject(self, ex);}
}
可以看到是同步执行的,所以下面代码依次输出1,2,3
new Promise(() => {console.log(1);
});
console.log(2);
setTimeout(() => {console.log(3);
}, 0);
then
Promise.prototype.then = function(onFulfilled, onRejected) {var prom = new this.constructor(noop);// handler存储调用then的promise及then的参数var handler = new Handler(onFulfilled, onRejected, prom);handle(this, handler);// 返回prom,即下一个then的this对象return prom;
};
function Handler(onFulfilled, onRejected, promise) {this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;this.onRejected = typeof onRejected === 'function' ? onRejected : null;this.promise = promise;
}
handle
根据当前promise的状态处理:
当前promise的值是promise,则取最内层的promise值为作为当前promise
当前promise为pending状态,将其调用then时then的参数及自身存到自己的_deferreds上,所以then return prom会在then的调用链上形成promise内有_deferreds,_deferreds内有promise的循环
当前promise为resolve(1)或reject(2)状态,取对应的回调执行
function handle(self, deferred) {while (self._state === 3) {self = self._value;}// 将then的参数存放在then的调用者的_deferreds中if (self._state === 0) {self._deferreds.push(deferred);return;}self._handled = true;// resolve后当前promise的状态为1,reject后为2,且要在下个事件循环中完成回调Promise._immediateFn(function() {var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;if (cb === null) {(self._state === 1 ? resolve : reject)(deferred.promise, self._value);return;}var ret;try {ret = cb(self._value);} catch (e) {reject(deferred.promise, e);return;}// deferred.promise:取deferred上的promise,及下一个then的调用者resolve(deferred.promise, ret);});
}
resolve
关键代码:
将当前promise的状态改为1(resolve),执行final,
self._state = 1;
self._value = newValue;
finale(self);
function finale(self) {if (self._state === 2 && self._deferreds.length === 0) {Promise._immediateFn(function() {if (!self._handled) {Promise._unhandledRejectionFn(self._value);}});}// 取当前promise的_deferreds,处理当前promise的状态for (var i = 0, len = self._deferreds.length; i < len; i++) {handle(self, self._deferreds[i]);}self._deferreds = null;
}
Promise的就是根据状态进行处理的过程,最关键的是then方法的返回参数并不是this,因为每个then或catch的状态需要分开处理
new Promise((res) => { res(); }) // p1
.then(f1) // p2
.then(f2) // p3
将上面代码中调用每行then的promise实例分别标记为p1,p2,p3,当然p1自己就是promise
p2对应的line执行时,调用者是p1,在p1实例的_deferreds中存储f1和p2的实例,且返回p2
p3对应的line执行时,调用者是p2,所以在p2实例的_deferreds中存储f2和p3的实例,且返回p3
这样保证每个then或catch的状态不会收其他promise的影响
promise polyfill解析相关推荐
- vue ie报错:SCRIPT5022: [vuex] vuex requires a Promise polyfill in this browser.
错误描述: vuex] vuex requires a Promise polyfill in this browser. 解析:因为vue项目中使用了ES6 Promise,而IE浏览器不支持 解决 ...
- vue项目在IE中显示空白,报错:vuex requires a Promise polyfill in this browser
问题描述 vue项目在非IE内核的浏览器中显示正常,在IE内核浏览器中报错,并显示空白.报错如下: SCRIPT5022: [vuex] vuex requires a Promise polyfi ...
- IE报vuex requires a Promise polyfill in this browser问题解决
使用Vuex, IE浏览器报错 因为使用了 ES6 中用来传递异步消息的的Promise,而IE低版本的浏览器不支持. 解决方法 第一步: 安装 babel-polyfill . babel-poly ...
- Promise 原理解析与实现(遵循Promise/A+规范)
1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...
- ie 报错 vuex requires a Promise polyfill in this browser
<script src='https://cdn.polyfill.io/v2/polyfill.min.js'></script> 转载于:https://www.cnblo ...
- JavaScript异步编程【中】 -- Promise 详细解析
文章内容输出来源:拉勾教育 大前端高薪训练营 前言 在ES6中,新增加了一种异步编程的解决方案Promise,它是一种规范,是一套处理JavaScript异步的机制. Promise的含义 简单来说, ...
- 【ES6】什么是Promise?解析Promise的基本用法
Promise介绍 Promise 是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise ...
- promise 原理解析
1. 基本功能实现 思路:(当前不考虑链式调用) promise 实例化时 会传入一个函数,此函数有俩个参数 直接执行这个传入的函数 根据这两个参数(函数),去改变函数的状态,并且储存传递的值 调用方 ...
- promise原理解析
Promise就是一个对象.(OK) 承诺做某件事,然后成功了执行什么,失败了执行什么. 执行一段代码(执行一个函数),成功了执行另一段代码,失败了执行一段代码. 一个Promise对象 帮忙执行一个 ...
最新文章
- HttpWebRequest类之基本定义
- 正则表达式(面试会考)
- js 导出pdf上传至oss_前端上传图片到oss,压缩图片后上传至oss(补充图片文件旋转90度问题)...
- root用户远程登陆配置
- 使用 dom4j 解析 XML
- Akka-Cluster(0)- 分布式应用开发的一些想法
- 51单片机课程设计:基于TCS230/3200的颜色复制显示器
- 【附干货】卸载CAD后将注册表清理干净的方法及步骤
- 02_安装nginx-银河麒麟V10(Kylin Linux Advanced Server V10 (Tercel))操作系统
- 职场沟通10个小技巧 让你迅速融入团队
- 标准库std::min/std::max与min/max宏冲突
- 俄罗斯无线认证-FAC认证
- Java实习生常规技术面试题每日十题Java基础(八)
- Controllable Generation from Pre-trained Language Models via Inverse Prompting翻译
- 4种FPGA时钟分频 【附源码】:1.偶数分频;2.奇数分频(占空比50%);3.奇数分频(任意无占空比);4.小数分频;
- MySQL索引和锁实现原理及优化
- 怎样成为精力管理的高手————作者:张遇生
- python3 copy和deepcopy
- 智能优化算法——哈里鹰算法(Matlab实现)
- 对于盈帆报表设计器的介绍(报表工具)
热门文章
- 第二类读者写者问题:写者优先
- python 新的随机爬山算法,一起交流~
- 非对称加密算法原理及应用
- R语言dplyr包summarise_at函数计算dataframe数据中多个数据列(通过向量指定)的计数个数、均值和中位数、使用list函数指定函数列表并指定自定义函数名称
- 为什么电商行业都用ERP?
- win10 如何禁止特定路径下的exe启动程序
- bitcode 是什么_说过不再想念不再回忆从前是什么歌
- 2年从月薪8000程序员到Android高级架构师,我的逆袭之路。
- 智能交通:OpenDataPlatform在交通数据分析和可视化中的应用
- 分享个手工星球辅助脚本,自挂机动采集资源、过星球广场任务