js原生方法promise的实现
一会儿就要回家过年了，再来手写一个promise吧，要不等着下班真的煎熬。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="杨欣">
<title>手写promise</title>
</head>
<body>
<script>
// 第一版
// class _Promise {
// constructor(handler) {
// // 判断参数是否不为函数
// if (typeof handler !== 'function') {
// throw new TypeError(`${handler} is not a function`)
// }
// this.state = 'pending'//初始状态
// this.value = null//最终返回值
// this.reason = null //失败原因
// let _this = this;
// const resolve = function (value) {
// if (_this.state === 'pending') {
// _this.state = 'fulfilled'//改变状态
// _this.value = value//最终返回值赋值
// console.log(_this.value)
// }
// }
// const reject = function (reason) {
// if (_this.state === 'pending') {
// _this.state = 'rejected'//改变状态
// _this.reason = reason//失败原因赋值
// }
// }
// handler(resolve, reject)
// }
// }
// new _Promise((resolve, reject) => {
// resolve(12345)
// })
// // 第二版 代码优化，加then方法，模拟异步操作
// class _Promise {
// constructor(handler) {
// // 判断参数是否不为函数
// if (typeof handler !== 'function') {
// throw new TypeError(`${handler} is not a function`)
// }
// this.initValue()//初始化值
// this.bindThis()//绑定this
// handler(this.resolve, this.reject)
// }
// bindThis() {
// this.resolve = this.resolve.bind(this)
// this.reject = this.reject.bind(this)
// }
// initValue() {
// this.state = 'pending'//初始状态
// this.value = null//最终返回值
// this.reason = null //失败原因
// }
// resolve(value) {
// if (this.state === 'pending') {
// this.state = 'fulfilled'//改变状态
// this.value = value//最终返回值赋值
// }
// }
// reject(reason) {
// if (this.state === 'pending') {
// this.state = 'rejected'//改变状态
// this.reason = reason//失败原因赋值
// }
// }
// then(onFulfilled, onRejected) {
// if (typeof onFulfilled !== 'function') {
// onFulfilled = function (value) {
// return value
// }
// }
// if (typeof onRejected !== 'function') {
// onRejected = function (reason) {
// throw reason
// }
// }
// if (this.state === 'fulfilled') {
// // 模拟异步
// setTimeout(() => {
// onFulfilled(this.value)
// }, 1000);
// }
// if (this.state === 'reject') {
// setTimeout(() => {
// onRejected(this.reason)
// }, 1000);
// }
// }
// }
// new _Promise((resolve, reject) => {
// resolve(1234567)
// }).then((value) => {
// console.log(value, 'value')
// })
// new _Promise((resolve, reject) => {
// setTimeout(() => {
// resolve(1234567)
// }, 1000);
// }).then((value) => {
// console.log(value, 'value')
// })//这种情况下then方法中代码不会打印，因为then方法中state为pending，因此需要添加一个状态判断
// 第三版 添加状态判断，添加链式调用(then方法需要返回promise对象)
class _Promise {
constructor(handler) {
// 判断参数是否不为函数
if (typeof handler !== 'function') {
throw new TypeError(`${handler} is not a function`)
}
this.initValue()//初始化值
this.bindThis()//绑定this
try {
handler(this.resolve, this.reject)
} catch (error) {
this.reject(error)
}
}
bindThis() {
this.resolve = this.resolve.bind(this)
this.reject = this.reject.bind(this)
}
initValue() {
this.state = 'pending'//初始状态
this.value = null//最终返回值
this.reason = null //失败原因
this.onFulfilledCbs = []//成功回调
this.onRejectedCbs = []//失败回调
}
resolve(value) {
if (this.state === 'pending') {
this.state = 'fulfilled'//改变状态
this.value = value//最终返回值赋值
// resolve成功执行
this.onFulfilledCbs.forEach(fn => fn(this.value))
}
}
reject(reason) {
if (this.state === 'pending') {
this.state = 'rejected'//改变状态
this.reason = reason//失败原因赋值
this.onRejectedCbs.forEach(fn => fn(this.reason))
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled !== 'function') {
onFulfilled = function (value) {
return value
}
}
if (typeof onRejected !== 'function') {
onRejected = function (reason) {
throw reason
}
}
if (this.state === 'fulfilled') {
// 模拟异步
setTimeout(() => {
onFulfilled(this.value)
});
}
if (this.state === 'reject') {
setTimeout(() => {
onRejected(this.reason)
});
}
let promise2 = new _Promise((resolve, reject) => {
if (this.state === 'fulfilled') {
setTimeout(() => {
try {
const data = onFulfilled(this.value)
_Promise.resolvePromise(promise2, data, resolve, reject)
} catch (e) {
reject(e)
}
})
}
if (this.state === 'rejected') {
setTimeout(() => {
try {
const data = onRejected(this.reason)
_Promise.resolvePromise(promise2, data, resolve, reject)
} catch (e) {
reject(e)
}
})
}
if (this.state === 'pending') {
this.onFulfilledCbs.push(value => {
setTimeout(() => {
try {
const data = onFulfilled(value)
_Promise.resolvePromise(promise2, data, resolve, reject)
} catch (e) {
reject(e)
}
})
})
this.onRejectedCbs.push(reason => {
setTimeout(() => {
try {
const data = onRejected(this.reason)
_Promise.resolvePromise(promise2, data, resolve, reject)
} catch (e) {
reject(e)
}
})
})
}
})
return promise2
}
}
_Promise.resolvePromise = function (promise2, data, resolve, reject) {
// data 与 promise 相等
if (promise2 === data) {
reject(new TypeError('Chaining cycle detected for promise'))
}
let flag = false
if (data instanceof _Promise) {
// 判断 data 为 Promise
data.then(
value => {
_Promise.resolvePromise(promise2, value, resolve, reject)
},
reason => {
reject(reason)
}
)
} else if (data !== null && (typeof data === 'object' || typeof data === 'function')) {
// data 为对象或函数
try {
const then = data.then
if (typeof then === 'function') {
then.call(
data,
value => {
if (flag) return
flag = true
_Promise.resolvePromise(promise2, value, resolve, reject)
},
reason => {
if (flag) return
flag = true
reject(reason)
}
)
} else {
if (flag) return
flag = true
resolve(data)
}
} catch (e) {
if (flag) return
flag = true
reject(e)
}
} else {
resolve(data)
}
}
new _Promise((resolve, reject) => {
setTimeout(() => {
resolve(1234567)
}, 1000);
}).then((value) => {
console.log(value, 'value')
return 11111
}, (reason) => {
console.log(reason, 'reason')
}).then((res) => {
console.log(res, 'res')
})
</script>
</body>
</html>
js原生方法promise的实现的更多相关文章
- js 原生方法获取所有兄弟节点
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 【es6】js原生的promise
JavaScript 是单线程的,这意味着任何两句代码都不能同时运行,它们得一个接一个来.在浏览器中,JavaScript 和其他任务共享一个线程,不同的浏览器略有差异,但大体上这些和 JavaScr ...
- JS原生方法实现瀑布流布局
html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...
- 像jq那样获取对象的js原生方法
使用过jq的童鞋非常喜欢jq获取对象的方法,只要$()就可以获取,在此我封装一个js获取对象的方法 [注意]只对chrome,Firefox,opera,Safari,ie8及ie8以上版本有效 fu ...
- JS原生方法被覆盖后的恢复办法
alert 被覆盖 今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...
- js原生方法传参的细节（面试必问）
废话不说,直接上题. slice(),接收两个参数,第一个为开始index(从0开始),第二个为结束的index(也是从0开始,但是不包括index本身,只到index-1).返回值是截取的数组,原数 ...
- JS原生方法实现jQuery的ready()
浏览器加载页面的顺序: 1. 解析HTML结构 2. 加载外部脚本和样式表文件 3. 解析并执行脚本代码 4. 构造HTML DOM模型==ready() 5. 加载图片等组件 6. 页面加载完毕== ...
- 图片首尾平滑轮播(JS原生方法—节流)<原创>
首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg. <!DOCTYPE html> <html lang=" ...
- 【笔记】js原生方法 在元素外部或内部实现添加元素功能（类似jq 的 insert 和 append）
介绍的这个方法是:insetAdjacentHTML() 方法 此方法接收两个参数: 第一个参数必为下列值: beforebegin:在调用的元素外部的前面添加一个目标元素 afterend:在调用元 ...
随机推荐
- C# + Matlab 实现计件工时基于三层BP神经网络的拟合--真实项目
工序工时由该工序的工艺参数决定,有了工时后乘以固定因子就是计件工资.一般参考本地小时工资以及同类小时工资并考虑作业的风险等因素给出固定因子 采用的VS2010 , Matlab2015a 64, 开 ...
- python之深浅copy与id
我们都知道 所谓变量就是就是在空间中开辟一块内存空间.来存放东西的 学过c语言的都知道而数组也是有内存地址的 我们如何来查看内存地址呢?id()这函数就来了 x = 5 print(id(x)) 如此 ...
- Flink处理函数实战之一：深入了解ProcessFunction的状态(Flink-1.10)
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- java的for循环中遇到异常抛出后继续循环执行
@Testpublic void loopTryCatchTest() throws Exception { Map<String, Object> a = new HashMap(); ...
- Centos7下Jewel版本radosgw服务启动
前言 本篇介绍了centos7下jewel版本的radosgw配置,这里的配置是指将服务能够正常起来,不涉及到S3的配置,以及其他的更多的配置,radosgw后面的gw就是gateway的意思,也就是 ...
- 协程gevent模块和猴子补丁
# pip 装模块 greenlet和gevent # 协程 # 与进程.线程一样也是实现并发的手段 # 创建一个线程.关闭一个线程都需要创建寄存器.栈等.需要消耗时间 # 协程本质上是一个线程 # ...
- go返回json数据
package main import ( "encoding/json" ) type Repay struct { Code uint64 `json:"code&q ...
- jsonp和普通的ajax区别
1.请求类型.返回类型不一样 2.返回数据类型
- apache-commons和guava的工具类
apache-commons工具类:https://www.iteye.com/blog/zhoualine-1770014 guava工具类:https://blog.csdn.net/Dream_ ...
- 对于this和当前线程的一些理解
在学习这个InheritableThreadLocal类的时候,我对于有个地方一直没有理解,我发现了盲点. 1 private void init(ThreadGroup g, Runnable ta ...