目录
☀️作者简介:大家好我是言不及行yyds
🐋个人主页:言不及行yyds的CSDN博客
🎁系列专栏:【前端】
1.女朋友模拟promise
1.1 promise前置知识
3种状态:pendding(等待状态)
resolved (成功状态)
rejected(失败状态)
2种改变状态
resolve将pendding=》 resolved
reject 将pendding=》 rejected
2种回调:onResolved(成功状态的回调)
onRejected(失败状态的回调)
2中值
成功的值value,
失败的值reason
1.2 我们知道promise的中文翻译就是承诺(信任)
假设你的50岁女朋友马上要过生日了,
那么你肯定是要做点什么
对吧,于是你给出了你的承诺(pendding),
你保证在她的生日时会送上一个 精美的礼物。
就这样过了一段时间,你无非两种结果。
你的女朋友也有两种反应
假设你是一个好男人,你实现了你的承诺(resolved),
这个时候你的女朋友很高兴,
当时就给了你几十万(value),
你马上就去买了一辆宝马(onResolved),
如果4s店暂时没货了,你就买不到了,
你就很难受,(onRejected)
有的话,你立马就买了下来。
你就感觉很开兴(再次onResolved)
假设你是一个渣男(rejected)
你忘记了你的承诺,
你就找借口说加班忘了(reason),
这个时候你的女朋友很不高兴,
当时就给了你一巴掌并分手了(onRejected),
你感觉很后悔(再次onRejected)
这两种情况都是不能回到当时承诺的时候
1.3总结
只能从pendding变成resolved,从pendding变成rejected,其他的状态不能变pendding
在.then()中有两种回调,onResolved(成功状态的回调) onRejected(失败状态的回调)
如果再次.then()时还是有前面then回调的值,通过resolve()返回成功的值 reject()
返回失败的值
1.4 代码实践
var flag = true
var myPromise = new Promise((resolve, reject) => {
if (flag) {
const pic = {
brand: 'kh',
price: 1444
}
resolve(pic)
} else {
reject("我加班,搞完记le")
}
})
myPromise.then((value) => {
console.log(value)
},
(reason) => {
console.log(reason)
})
当flag=fasle时
2.手写Promise
在这里我们只简单的写一些简单的promise方法。比如
resolve和reject以及then方法在下面给出我们的思路、
关于链式调用等其他方法,之后你可以在我的资源有完整的
源码ppt。
2.1思路
1.搭建简单的函数形式(函数里面有resolve和reject方法)
2.将then方法放置在自定义函数的原型上(放在原型上可实现共享)
3.初始化调用函数
4.调用立即执行函数(excutor)用于在函数中执行resolve和reject
5.保存成功与失败的结果(并改变状态)
6.then处理传入的值(onResolve和onReject)如果是一个方法则返回,不是返回自定义的方法
7.存储并释放成功回调(失败回调)的存储的值
2.2代码
//1.搭建基本的架构
var myPromise = function (excutor) {
let self = this
self.state = "pendding"//初始化状态的值
self.value = null //7.1成功返回的值
self.reason = null //7.1失败返回的值
self.onFulfilledcallBack=[] //成功回调的存储
self.onRejectedcallBack=[] //失败回调的存储
//1.1改变状态为onResolve
function resolve(value) {
//5.1保存成功结果(并改变状态)
if (self.state === "pendding") {
self.state = "fulfilled"
self.value = value
//7.3释放成功回调的存储的值
self.onFulfilledcallBack.forEach(item=>item(value))
}
}
//1.2改变状态为onReject
function reject(reason) {
//5.2保存失败的结果(并改变状态)
if (self.state === "pendding") {
self.state = "rejected"
self.reason = reason
//7.3释放成功回调的存储的值
self.onRejectedcallBack.forEach(item=>item(reason))
}
}
//3.初始化调用函数
//4.调用立即执行函数(excutor)用于在函数中执行resolve和reject
try {
// 4.1立即同步调用 excutor()处理
excutor(resolve, reject)
} catch (error) { // 4.2如果出了异常, 直接失败
reject(error)
}
}
//2.将then方法放置在自定义函数的原型上
myPromise.prototype.then = function (onfulfilled, onRejected) {
onResolve = typeof onfulfilled === "function" ?
onfulfilled : function () { data => { resolve(data) } }
onReject = typeof onfulfilled === "function" ?
onfulfilled : function () {
err => { reject(err) }
}
let self=this
if(self.state==='pendding'){
//7.2存储成功与失败回调的方法
self.onFulfilledcallBack.push(onfulfilled)
self.onRejectedcallBack.push(onRejected)
}
}
const demo = new myPromise((resolve, reject) => {
const bk={
tg:'it is ok'
}
console.log(bk)
setTimeout(()=>{
console.log("222---222")
},2000)
})
demo.then(value => {
console.log(value)
})
好了这次的文章就到这了
如果觉得还不错的话,帮忙点个关注吧
希望能给博主点赞哎🎨,评论🧶,收藏🥼三连一波