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:在调用元 ...
随机推荐
- CSS3之animation属性
CSS中的animation属性可用于为许多其他CSS属性设置动画,例如颜色,背景色,高度或宽度. 每个动画都需要使用@keyframes这种at-rule语句定义,然后使用animation属性来调 ...
- CSS实现模拟百度分享侧边栏效果
在<JS模拟百度分享侧边栏效果>一文中对于Div区块的运动通过JS实现了鼠标移入滑出显示,鼠标移出滑入隐藏的效果.其实在CSS3中通过transition属性就可以较为轻松实现. < ...
- Flink处理函数实战之一：深入了解ProcessFunction的状态(Flink-1.10)
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- go-zero之web框架
go-zero 是一个集成了各种工程实践的 web 和 rpc 框架,其中rest是web框架模块,基于Go语言原生的http包进行构建,是一个轻量的,高性能的,功能完整的,简单易用的web框架 服务 ...
- 自动化翻译ceph文档
需求很简单,翻译官网的操作文档 下载ceph代码luminous版本 这个只用来编译doc的,我们只需要最新的这个分支即可,拉最少的代码 git clone -b v12.2.13 --single- ...
- Gulp自动化构建的基本使用
Study Notes 本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注.收藏.点赞下本博主的文章. Gulp 用自动化构建工具增强你的工作流程! gulp 将开发流程中让人痛苦或耗时的任务 ...
- NO.A.0002——Git简史及安装教程/创建本地仓库/提交项目到本地仓库/误删还原
一.Git简史及同类产品对比: 1.git简史: 同生活中的许多伟大事件一样,Git 诞生于一个极富纷争大举创新的年代.Linux 内核开源项目有着为数众广的参与者.绝大多数的 Linu ...
- Camtasia处理音频制作BGM
我们在剪辑自己录制的视频时经常会需要同时对音频进行处理,camtasia是一个可以对视频的音频或者单独的音频文件进行处理的软件,那我们就来看看到底如何使用camtasia 2019(Win)来处理音频 ...
- 怎么用MindManager2019去做一个好的网络图
大家知道网络图吗?是由作业(箭线).事件(又称节点)和路线三个因素组成的.它是一种图解模型,形状如同网络,故称为网络图.运用网络图能够使步骤简洁明了,今天我我们就说一说网络图软件MindManager ...
- JUC并发工具包之Semaphore
目录 Semaphore (JDK) Timed Semaphore (Apache Commons) Semaphore vs. Mutex CodeRepo Semaphore (JDK) 我们使 ...