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:在调用元 ...
随机推荐
- 庐山真面目之四微服务架构Consul集群和Nginx版本实现
庐山真面目之四微服务架构Consul集群和Nginx版本实现 一.简介 在上一篇文章<庐山真面目之三微服务架构Consul版本实现>中,我们已经探讨了如何搭建基于单节点Consu ...
- linux netfilter nat2
linux netfilter nat1 后面在上传
- Lamport面包店算法详解（转 侵删）
范例1: boolean choosing[n];表示进程是否在取号 int number[n];记录每个进程取到的号码 这些数据结构分别初始化为false和0,为了方便,定义如下符号: 若a&l ...
- html 小米商城导航栏示例
1.小米导航栏示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...
- 使用进程池模拟多进程爬取url获取数据，使用进程绑定的回调函数去处理数据
1 # 使用requests请求网页,爬取网页的内容 2 3 # 模拟使用进程池模拟多进程爬取网页获取数据,使用进程绑定的回调函数去处理数据 4 5 import requests 6 from mu ...
- 我要进大厂之大数据MapReduce知识点（1）
01 我们一起学大数据 老刘今天分享的是大数据Hadoop框架中的分布式计算MapReduce模块,MapReduce知识点有很多,大家需要耐心看,用心记,这次先分享出MapReduce的第一部分.老 ...
- 网络拓扑实例之VRRP负载分担(四)
组网图形 VRRP负载分担简介 负载分担方式是指多台设备同时承担业务,因此负载分担方式需要两个或者两个以上的虚拟路由器,每个虚拟路由器都包括一个Master路由器和若干个Backup路由器,各虚拟路 ...
- WinRM服务远程命令执行
WinRM服务简介 WinRM是WindowsRemoteManagementd(win远程管理)的简称.基于Web服务管理(WS-Management)标准,使用80端口或者443端口.这样一来,我 ...
- kali 系列学习10-渗透攻击MySQL数据库服务、PostgreSQL数据库服务、Tomcat服务和PDF文件
介绍使用MSFCONSOLE工具渗透攻击MySQL数据库服务.PostgreSQL数据库服务.Tomcat服务和PDF文件等. 6.4.1 渗透攻击MySQL数据库服务 MySQL是一个关系型数据库管 ...
- Codeforces375D Tree and Queries
dsu on tree 题目链接 点我跳转 题目大意 给定一棵 \(n\) 个节点的树,根节点为 \(1\).每个节点上有一个颜色 \(c_i\) \(m\) 次询问. 每次询问给出 \(u\) \( ...