用女朋友角度来解释promise，并手写promise

目录

1.女朋友模拟promise

   1.1 promise前置知识

   1.2 我们知道promise的中文翻译就是承诺（信任）

   1.3总结

   1.4 代码实践

 2.手写Promise

2.1思路

2.2代码

---

☀️作者简介：大家好我是言不及行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)
        })

好了这次的文章就到这了
如果觉得还不错的话，帮忙点个关注吧
希望能给博主点赞哎，评论，收藏三连一波