手写基础 promise

简介: 手写基础 promise

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. 原型上挂个thencatch

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


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
3月前
|
前端开发 JavaScript API
【面试题】说说 Promise是什么?如何使用
【面试题】说说 Promise是什么?如何使用
|
6月前
|
存储 前端开发
|
6月前
|
前端开发
Promise的用法&原理&手写实现-2
Promise的用法&原理&手写实现-2
21 1
|
4月前
|
前端开发 JavaScript
手写promise
手写promise
26 1
|
6月前
|
前端开发 JavaScript API
Promise的用法&原理&手写实现-1
Promise的用法&原理&手写实现-1
23 0
|
9月前
|
前端开发
手写Promise
手写Promise
|
9月前
|
前端开发 vr&ar
自定义手写Promise
手写函数版和类版Promise
38 0
|
前端开发
前端学习案例12-promise源码实现4
前端学习案例12-promise源码实现4
41 0
前端学习案例12-promise源码实现4
|
前端开发
前端学习案例13-promise源码实现5
前端学习案例13-promise源码实现5
55 0
前端学习案例13-promise源码实现5
|
前端开发
前端学习案例12-promise源码实现4
前端学习案例12-promise源码实现4
53 0
前端学习案例12-promise源码实现4