Promise原理实现
首先先看一下 promise 的调用方式:
// 实例化 Promise:
new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(1) //这里相当于给value赋值
}, 0)
}).then(value => {
console.log(value)
})
实现原理如下:
const PENDING = 'pending' //首先我们创建了三个常量用于表示状态,对于经常使用的一些值都应该通过常量来管理,便于开发及后期维护
const RESOLVED = 'resolved'
const REJECTED = 'rejected' function MyPromise(fn) {
const that = this //在函数体内部首先创建了常量 `that`,因为代码可能会异步执行,用于获取正确的 `this` 对象
that.state = PENDING //一开始 `Promise` 的状态应该是 `pending`
that.value = null //`value` 变量用于保存 `resolve` 或者 `reject` 中传入的值
that.resolvedCallbacks = []
that.rejectedCallbacks = []
/*
`resolvedCallbacks` 和 `rejectedCallbacks` 用于保存 `then` 中的回调,
因为当执行完 `Promise` 时状态可能还是等待中,这时候应该把 `then` 中的回调保存起来用于状态改变时使用
*/
function resolve(value) {
if (that.state === PENDING) {
that.state = RESOLVED
that.value = value
that.resolvedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数
}
} function reject(value) {
if (that.state === PENDING) {
that.state = REJECTED
that.value = value
that.rejectedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数
}
}
/*
* 首先两个函数都得判断当前状态是否为等待中,因为规范规定只有等待态才可以改变状态
* 将当前状态更改为对应状态,并且将传入的值赋值给 `value`
* 遍历回调数组并执行
*/
try {
fn(resolve, reject)
} catch (e) {
reject(e)
} } MyPromise.prototype.then = function(onFulfilled, onRejected) {
const that = this
//首先判断两个参数是否为函数类型,因为这两个参数是可选参数
//当参数不是函数类型时,需要创建一个函数赋值给对应的参数,同时也实现了透传
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (v) => { return v }
onRejected =
typeof onRejected === 'function'
? onRejected
: r => {
throw r
}
//接下来就是一系列判断状态的逻辑,当状态不是等待态时,就去执行相对应的函数。
//如果状态是等待态的话,就往回调函数中 `push` 函数,比如如下代码就会进入等待态的逻辑
if (that.state === PENDING) {
that.resolvedCallbacks.push(onFulfilled)//push这里是保存回调函数
that.rejectedCallbacks.push(onRejected)
}
if (that.state === RESOLVED) {
onFulfilled(that.value)
}
if (that.state === REJECTED) {
onRejected(that.value)
}
}
详细解释如下:
new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 0)
})
(resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 0)
}
function MyPromise(fn){
try {
fn(resolve, reject) // 在这里执行了传入的参数fn(),并且把规定的
resolve, reject 两个参数传递到 fn 中。
} catch (e) {
reject(e)
}
}
function resolve(value) {
if (that.state === PENDING) {
that.state = RESOLVED
that.value = value
that.resolvedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数
}
}
new MyPromise((resolve, reject) => {
//异步代码
}).then(value => {
console.log(value)
})
if (that.state === PENDING) {
that.resolvedCallbacks.push(onFulfilled)//push这里是保存回调函数
that.rejectedCallbacks.push(onRejected)
}
setTimeout(() => {
resolve(1)
}, 0)
function resolve(value) {
if (that.state === PENDING) {
that.state = RESOLVED
that.value = value
that.resolvedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数
}
}
new MyPromise((resolve, reject) => {
resolve(1)
}).then(value => {
console.log(value)
})
try {
fn(resolve, reject)
} catch (e) {
reject(e)
}
function resolve(value) {
if (that.state === PENDING) {
that.state = RESOLVED
that.value = value
that.resolvedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数
}
}
new MyPromise((resolve, reject) => {
//同步代码
}).then(value => {
console.log(value)
})
MyPromise.prototype.then = function(onFulfilled, onRejected) {
if (that.state === RESOLVED) {
onFulfilled(that.value)
}
}
Promise原理实现的更多相关文章
- Promise原理 && 简单实现
Promise原理 参考https://github.com/chunpu/promise/blob/master/promise.js 个人认为原博的实现有点问题 在next函数的实现上, 会导致无 ...
- promise原理
简介 Promise 对象用于延迟(deferred) 计算和异步(asynchronous )计算.一个Promise对象代表着一个还未完成,但预期将来会完成的操作.Promise 对象是一个返 ...
- Promise 原理
异步:可同时好几件事,互不影响: 同步:按循序一件一件.... 异步好多缺点:.... promise就是解决异步计算的这些缺点的,主要用于: 1.异步计算: 2.可以将异步操作队列化 按期望的顺序 ...
- 这一次,彻底弄懂 Promise 原理
作者声明 本人将迁移至个人公众号「前端Q」及「掘金」平台写文章.博客园的文章将不再及时更新发布.欢迎大家关注公众号「前端Q」及我的掘金主页:https://juejin.im/user/5874526 ...
- Promise原理—一步一步实现一个Promise
promise特点 一个promise的当前状态只能是pending.fulfilled和rejected三种之一.状态改变只能是pending到fulfilled或者pending到rejected ...
- 30分钟,让你彻底明白Promise原理
前言 前一阵子记录了promise的一些常规用法,这篇文章再深入一个层次,来分析分析promise的这种规则机制是如何实现的.ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不 ...
- Promise原理剖析
传统的异步回调编程最大的缺陷是:回调地狱,由于业务逻辑非常复杂,代码串行请求好几层:并行请求以前也要通过引用step.async库实现.现在ES6推出了Promise,通过Promise的链式调用可以 ...
- ES6之promise原理
我在这里介绍了promise的原理: https://juejin.im/post/5cc54877f265da03b8585902 我在这里 仅仅张贴 我自己实现的简易promise——DiProm ...
- 10分钟,让你彻底明白Promise原理
什么是Promise?本代码用定外卖来举例子,让你明白. // 定外卖就是一个Promise,Promist的意思就是承诺// 我们定完外卖,饭不会立即到我们手中// 这时候我们和商家就要达成一个承诺 ...
随机推荐
- zabbix4.2+grafana搭建骚气的监控运维平台
Zabbix 是一个企业级分布式开源监控解决方案,其监控与告警功能十分强大.Grafana是一款开源的可视化软件,可以搭配数据源实现一个数据的展示和分析:Grafana功能强大,有着丰富的插件.两者结 ...
- python scipy包进行GO富集分析p值计算
最近总是有需要单独对某一个类型的通路进行超几何分布的p值计算,这里记录一下python包的计算方法 使用scipy的stat里面的hypergeom.sf方法进行富集分析的p值计算 hsaxxxxx ...
- linux打印指定的行的内容
使用sed打印第99行 sed -n '99,p' test.txt 使用awk打印第99行 awk 'NR==99' test.txt awk 'FNR==99' test.txt perl 完成 ...
- 《ucore lab4》实验报告
资源 ucore在线实验指导书 我的ucore实验代码 练习1:分配并初始化一个进程控制块 题目 alloc_proc函数(位于kern/process/proc.c中) 负责分配并返回一个新的str ...
- Javascript 闭包何时回收?
定义 闭包是函数和声明该函数的词法环境的组合.闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量. 范例 fun ...
- Windows上安装配置SSH教程(1)
作者:feipeng8848 出处:https://www.cnblogs.com/feipeng8848/p/8559803.html 本站使用「署名 4.0 国际」创作共享协议,转载请在文章明显位 ...
- sqlserver 统计每分钟内的数量
1.统计每分钟内 url 的访问数量 SELECT SUBSTRING(CONVERT(varchar(100), date, 20), 0,17) as dateTime,COUNT(url) as ...
- nodeJs+vue安装教程详解 相信
相信很多朋友都在装node服务和安装vue的时候会遇到一些问题,下面为大家详细介绍node服务的安装以及vue的安装: 1.nodeJs官网下载版本(根据自己电脑的配置进行相应下载即可):默认安装路径 ...
- C#压缩和解压文件
这里用两种方法实现C#压缩和解压文件 1.使用System.IO.Compression名称空间下的相关类(需引用 System.IO.Compression.FileSystem和System.IO ...
- Visual Web Developer 2012安裝教程
1.打开网页链接http://www.w3school.com.cn/aspnet/mvc_intro.asp 点击Visual Web Developer 2012进行安装安装平台(WebPlatf ...