1. 前言

1. 玩下吧 手写 promise,看看能写成啥样

---

2. promise 基础结构

    setTimeout(() => {
        var random = Math.random()
        if(random < 0.7) resolve("成功的数据")
        else reject("错误的信息")
    }, 1000);
})
promise.then(function(data){ 
    console.log(data) 
}, function(err){ 
    console.log(err)
})

---

3. 手写`promise

1. 搞个 Promise 类 或者构造函数
2. 原型上挂个then 和catch

---

3. 构造函数代码

function MyPromise(callback){
    console.log(1, "执行了MyPromise的构造函数");
    // 每一个promise对象内部,都会有一个状态信息, 有三个可能值
    // pending 状态 表示等待状态, promise对象的默认状态, 
    // resolve 状态 表示成功状态, 当调用了resolve函数时,状态变成成功状态
    // reject 状态 表示失败状态, 当调用了reject函数时,状态变成失败状态
    // 注意: 状态值只能变化一次,一旦变更为成功或失败状态,则会一致保持这个状态 
    this.state = "pending";  // 初始化状态
    console.log("out", this)  // promise对象
    // myResolve和myReject是在外部调用的,所以函数中this指向并不是当前promise对象
    let self = this
    // 定义成功时的回调函数
    function myResolve(data){
        console.log(3, data, this, self) // Object [global] , promise
        self.state = "resolve" // 修改状态值为成功
        self.value = data; // 成功时value属性记录成功数据
        self.success(data) // 成功时,调用then函数中成功回调
    }
    // 定义失败时的回调函数
    function myReject(err){
        console.log(3, err, this, self)
        self.state = "reject" // 修改状态值为失败
        self.msg = err;  // 失败时用msg属性记录失败信息
        self.fail(err) // 失败时,调用then函数中失败回调
    }

    // MyPromise在创建对象时,其回调函数会直接执行, 所以在构造函数中直接调用, 并传入成功和失败状态对应的函数
    callback(myResolve, myReject);
}

---

4. 原型

// then方法是promise对象调用的方法,所以定义到构造函数原型中
MyPromise.prototype.then = function(success, fail=()=>{}){
    // 由于then函数可以在任意时刻调用, 所以调用then时,promise状态值不确定
    if(this.state == "pending"){
        // 说明此时异步任务还未结束, 还不能调用success或fail, 此时可以把success和fail这个回调函数传入this这个promise对象, 在异步任务结束后调用
        this.success = success;
        this.fail = fail;
    }
    if(this.state == "resolve"){
        // 如果当前状态是成功状态, 则调用then参数中的第一个成功回调
        success(this.value) // 参数传入成功数据
    }
    if(this.state == "reject"){
        // 如果当前状态是失败状态, 则调用then参数中的第二个失败回调
        fail(this.msg) // 参数传入失败信息
    }

    // then函数返回当前promise对象, 用于链式调用
    return this;
}

---

5. 使用

// 使用构造函数创建实例对象, 创建时,构造函数会执行
var p = new MyPromise(function(resolve, reject){
    console.log(2, '执行了myPeomise回调')
    setTimeout(() => {
        var random = Math.random()
        if(random < 0.7) resolve("成功的数据")
        else reject("错误的信息")
    }, 1000);
})
// 在异步任务结束前,调用then函数
p.then(function(data){
    console.log(4, data)
},function(err){
    console.log(4, err)
}).then(function(){})
// 在异步任务结束后, 调用then函数
setTimeout(() => {
    p.then(function(data){
        console.log(5, data)
    },function(err){
        console.log(5, err)
    })
}, 2000);

---

6. 后记

1. 只是初具雏形
2. 简单理解下 就行

---

参考资料

promise应用
async/await
promise

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉