手把手教你根据PromiseA+手写一个Promise类

最新推荐文章于 2024-06-20 14:18:22 发布
最新推荐文章于 2024-06-20 14:18:22 发布
阅读量90 收藏
点赞数
原文链接：https://juejin.im/post/5ac6d3e3f265da23a049cc90
版权

什么是Promise

Promise 是一个构造函数， new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数, excutor有两个函数类型形参resolve reject
其用法是 
let p = new Promise(function (resolve,reject){
    resolve("这是promise")
    reject("这个不执行")

})
p.then(function (data) {
    console.log(data)
},function (err) {
    console.log(err)
})复制代码

开始写一个Promise

1，我们从用法中就可以看出new Promise里面是一个函数，而函数里的传参是两个函数-resolve和reject。要明白，promise执行的时候有三种状态：

  1. pending
  2. resolve(成功)
  3. reject(失败)

只要成功就不会失败，只要失败就不会成功，不会又成功又失败。走了resolve就不会走reject，写了也没用。promise规范

function Promise(executor) {
    let  _self = this;
    _self.status = "pending";
    _self.value = undefined;//成功的原因；
    _self.reason = undefined;//失败的原因；

    function resolve(value) {
        if(_self.status === "pending"){
            _self.status = "resolved" //改变状态值
            _self.value = value   //给参数赋值
        }
    };
    function reject(reason) {
        _self.status = "rejected"
        _self.reason = reason
    }
    try{  //捕获异常
        executor(resolve,reject); //promise 参数是一个函数，函数中的俩个参数是两个函数
    }catch (e){
       reject(e)
    }
}
//promise实例上有个then方法。
Promise.prototype.then = function (onFulfilled,onRejected) {
    let _sele = this;
    if(_sele.status === "resolved"){
        onFulfilled(_sele.value)
    }
    if(_sele.status === "rejected"){
        onRejected(_sele.reason)
    }

}

module.exports = Promise;复制代码
一个简单的promise模块就写好了引入运行一下 
let Promise = require('./promise')
let p = new Promise(function (resolve,reject){
    resolve("这是promise")

})
p.then(function (data) {
    console.log(data)
},function (err) {
    console.log(err)
})复制代码

2，如果resolve 是需要异步执行，如下 

let Promise = require('./promise')
let p = new Promise(function (resolve,reject){
    setTimeout(function () {  //给一个延迟
        resolve("这是promise")
    })


})
p.then(function (data) {
    console.log(data)
},function (err) {
    console.log(err)
})复制代码
这样的话执行结果是空，没有执行出来，因为我们类里写的then方法是同步执行，当执行到判断status的值的时候，因为setTimeout的原因，状态值还没改变过来，所以代码会一直停在那，所以我们在这种情况下就要给一个空间来存放这些没有状态的操作，当状态明确了再执行。那么听起来就需要给一个数组结构空间了。 
function Promise(executor) {
    let  _self = this;
    _self.status = "pending";
    _self.value = undefined;//成功的原因；
    _self.reason = undefined;//失败的原因；
    _self.onResolvedCallbacks = []; // 存放then成功的回调
    _self.onRejectedCallbacks = []; // 存放then失败的回调

    function resolve(value) { // 成功状态
        if(_self.status === "pending"){
            _self.status = "resolved";
            _self.value = value;
            //判断好了状态，要循环执行出来，这里为什么会是数组，是因为会有：p.then();p.then(),多次执行的状态，不过只要有一个成功就是成功
            _self.onResolvedCallbacks.forEach(function (fn) {
                fn()
            })
        }
    };
    function reject(reason) { // 失败状态
        _self.status = "rejected";
        _self.reason = reason;
         _self.onRejectedCallbacks.forEach(function (fn) {
             fn()
         })
    }
    try{
        executor(resolve,reject);
    }catch (e){ // 捕获的时候发生异常,就直接失败了
       reject(e)
    }
}
//promise实例上有个then方法。
Promise.prototype.then = function (onFulfilled,onRejected) {
    let _sele = this;
    if(_sele.status === "resolved"){
        onFulfilled(_sele.value)
    }
    if(_sele.status === "rejected"){
        onRejected(_sele.reason)
    }
    if(_sele.status === "pending"){
        //把这个状态的都保存起来
        _sele.onResolvedCallbacks.push(function () {
            onFulfilled(_sele.value)
        })
        _sele.onRejectedCallbacks.push(function () {
            onRejected(_sele.reason)
        })
    }

}

module.exports = Promise;复制代码
3，链式调用，promise可以实现链式调用。方便又实惠。执行代码如下： 
let promise = new Promise(function (resolve,reject) {
    resolve(100)

})
//链式调用的特点，将第一次成功的返回值当成下一次回调函数的参数
promise.then(function (data) {
  throw new Error("123")
},function () {

}).then(function (data) {
    console.log(data);
},function(err){
    console.log(err)
})

//链式调用：靠的是返回一个新的promise复制代码
但其实也可以这样写： 
let p2 = promise.then(function (data) {
    return data  //这里返回的只要不是错误，下次走的还是成功，
},function () {

})
p2.then(function (data) {
    console.log(data);
},function(err){
    console.log(err)
})复制代码

这里不等价于（返回数据的化直接让下一次的promise 成功 如果返回的是promise就等待这个promise执行结果）

let p2 = promise.then(function (data) {
    return new Promise(function (resolve,reject) {
        resolve(data)
    })
},function () {

})
p2.then(function (data) {
    console.log(data);
},function(err){
    console.log(err)
})复制代码
正确的执行结果应该是100，那么开始写吧，（重头戏） 
function Promise(executor) {
    let  _self = this;
    _self.status = "pending";
    _self.value = undefined;//成功的原因；
    _self.reason = undefined;//失败的原因；
    _self.onResolvedCallbacks = []; // 存放then成功的回调
    _self.onRejectedCallbacks = []; // 存放then失败的回调

    function resolve(value) { // 成功状态
        if(_self.status === "pending"){
            _self.status = "resolved";
            _self.value = value;
            //判断好了状态，要循环执行出来，这里为什么会是数组，是因为会有：p.then();p.then(),多次执行的状态，不过只要有一个成功就是成功
            _self.onResolvedCallbacks.forEach(function (fn) {
                fn()
            })
        }
    };
    function reject(reason) { // 失败状态
        _self.status = "rejected";
        _self.reason = reason;
         _self.onRejectedCallbacks.forEach(function (fn) {
             fn()
         })
    }
    try{
        executor(resolve,reject);
    }catch (e){ // 捕获的时候发生异常,就直接失败了
       reject(e)
    }
}
//处理返回结果
 function resolvePromise(promise2,x,resolve,reject) {
//
    if(promise2 === x){  //首先要判断返回的x不能跟原来的promise相等,如果是的话就是自己等待自己了！。
       return reject(new TypeError("不能循环引用")); //这里应该报一个类型错误，有问题
    }
    let called; //表示是否调过
    if(x !== null &&(typeof x ==='object'||typeof x ==='function')){ //判断返回的x是不是一个promise,promise应该是一个对象;这里要把null排除因为typeof null是object
        try{
            //  1,看看返回的这个对象或方法里有没有then方法
            let then = x.then;//这里then可能是{then:1}
            if(typeof then  === 'function'){  //说明是一个promise
                then.call(x,function (y) {  //call是为了this指向x,
                    //2，再看是否被调用过
                    if(called) return ; //表示是否调用过成功或者失败
                    called = true;
                    // y可能还是一个promise，在去解析直到返回的是一个普通值
                    resolvePromise(promise2,y,resolve,reject)
                },function (err) { //表示失败了
                    if(called) return ;
                    called = true;
                    reject(err)
                })
            }else{
                resolve(x)
            }
        } catch (e){
            if(called) return ;
            called = true;
            reject(e)
        }

    }else{
        resolve(x)  //如果是常量就直接resolve;
    }
}


//promise实例上有个then方法。
Promise.prototype.then = function (onFulfilled,onRejected) {
    let _sele = this;
    //首先要先定义一个新的promise
    let promise2;
    if(_sele.status === "resolved"){
        promise2 = new Promise(function (resolve,reject) {
            setTimeout(function () {  //为了测试时 效果统一 因为很多人的实现 onfufiled 和 onrejected是异步执行，为了保证测试统一 所以全部异步
                try {   //捕获异常
                    let x =  onFulfilled(_sele.value)  //声明一个x来接受返回值
                    resolvePromise(promise2,x,resolve,reject)
                }catch (e){
                    reject(e)
                }
            })

        })

    }
    if(_sele.status === "rejected"){
        promise2 = new Promise(function (resolve,reject) {
            setTimeout(function () {  //为了测试时 效果统一 因为很多人的实现 onfufiled 和 onrejected是异步执行，为了保证测试统一 所以全部异步
                try {   //捕获异常
                    let x =   onRejected(_sele.reason)  //声明一个x来接受返回值
                    resolvePromise(promise2,x,resolve,reject)
                }catch (e){
                    reject(e)
                }
            })

        })

    }
    // 当调用then时可能没成功 也没失败
    if(_sele.status === "pending"){
        promise2 = new Promise(function (resolve,reject) {
            //把这个状态的都保存起来
            _sele.onResolvedCallbacks.push(function () {
                setTimeout(function () {
                    try {
                        let x = onFulfilled(_sele.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e)
                    }
                })
            });
            _sele.onRejectedCallbacks.push(function () {
                setTimeout(function () {
                    try {
                        let x = onRejected(_sele.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                })
            });
        })

    }
    return promise2;
}

module.exports = Promise;复制代码

对于promise2 === x 什么情况下出现

var p2 = promise.then(function (data) {
    return p2
},function () {

})
p2.then(function (data) {
    console.log(data);
},function(err){
    console.log(err)
})复制代码

4，如果有人这样执行代码也要考虑进去

let p2 = promise.then(function (data) {
    return new Promise(function (resolve,reject) {
        resolve(data)
    })
},function () {

})
p2.then().then().then(function (data) {//多个then()空调用
    console.log(data);
},function(err){
    console.log(err)
})复制代码
那我们就要对类里then方法里的回调做判断了 
        if(_self.status === "pending"){function Promise(executor) {
    let  _self = this;
    _self.status = "pending";
    _self.value = undefined;//成功的原因；
    _self.reason = undefined;//失败的原因；
    _self.onResolvedCallbacks = []; // 存放then成功的回调
    _self.onRejectedCallbacks = []; // 存放then失败的回调

    function resolve(value) { // 成功状态
// value可能是别人的promise
        if(value !==null&&(typeof value === 'object'||typeof value === 'function')){  //这种情况是为了判断 resolve(New promise)
                return value.then(resolve,reject)

            }
        if(_self.status === "pending"){
            _self.status = "resolved";
            _self.value = value;
            //判断好了状态，要循环执行出来，这里为什么会是数组，是因为会有：p.then();p.then(),多次执行的状态，不过只要有一个成功就是成功
            _self.onResolvedCallbacks.forEach(function (fn) {
                fn()
            })
        }
    };
    function reject(reason) { // 失败状态
        _self.status = "rejected";
        _self.reason = reason;
         _self.onRejectedCallbacks.forEach(function (fn) {
             fn()
         })
    }
    try{
        executor(resolve,reject);
    }catch (e){ // 捕获的时候发生异常,就直接失败了
       reject(e)
    }
}
//处理返回结果
 function resolvePromise(promise2,x,resolve,reject) {
    if(promise2 === x){  //首先要判断返回的x不能跟原来的promise相等。
       return reject(new TypeError("不能循环引用")); //这里应该报一个类型错误，有问题
    }
    let called; //表示是否调过
    if(x !== null &&(typeof x ==='object'||typeof x ==='function')){ //判断返回的x是不是一个promise,promise应该是一个对象;这里要把null排除因为typeof null是object
        try{
            //  1,看看返回的这个对象或方法里有没有then方法
            let then = x.then;//这里then可能是{then:1}
            if(typeof then  === 'function'){  //说明是一个promise
                then.call(x,function (y) {  //call是为了this指向x,
                    //2，再看是否被调用过
                    if(called) return ; //表示是否调用过成功或者失败
                    called = true;
                    // y可能还是一个promise，在去解析直到返回的是一个普通值
                    resolvePromise(promise2,y,resolve,reject)
                },function (err) { //表示失败了
                    if(called) return ;
                    called = true;
                    reject(err)
                })
            }else{
                resolve(x)
            }
        } catch (e){
            if(called) return ;
            called = true;
            reject(e)
        }

    }else{
        resolve(x)  //如果是常量就直接resolve;
    }
}


//promise实例上有个then方法。
Promise.prototype.then = function (onFulfilled,onRejected) {
    //成功和失败默认不穿给一个函数
    onFulfilled = typeof onFulfilled ==='function'?onFulfilled:function (value) {
        return value
    };
    onRejected = typeof  onRejected ==='function' ? onRejected :function (err) {
        throw err
    }
    let _sele = this;
    //首先要先定义一个新的promise
    let promise2;
    if(_sele.status === "resolved"){
        promise2 = new Promise(function (resolve,reject) {
            setTimeout(function () {  //为了测试时 效果统一 因为很多人的实现 onfufiled 和 onrejected是异步执行，为了保证测试统一 所以全部异步
                try {   //捕获异常
                    let x =  onFulfilled(_sele.value)  //声明一个x来接受返回值
                    resolvePromise(promise2,x,resolve,reject)
                }catch (e){
                    reject(e)
                }
            })

        })

    }
    if(_sele.status === "rejected"){
        promise2 = new Promise(function (resolve,reject) {
            setTimeout(function () {  //为了测试时 效果统一 因为很多人的实现 onfufiled 和 onrejected是异步执行，为了保证测试统一 所以全部异步
                try {   //捕获异常
                    let x =   onRejected(_sele.reason)  //声明一个x来接受返回值
                    resolvePromise(promise2,x,resolve,reject)
                }catch (e){
                    reject(e)
                }
            })

        })

    }
    // 当调用then时可能没成功 也没失败
    if(_sele.status === "pending"){
        promise2 = new Promise(function (resolve,reject) {
            //把这个状态的都保存起来
            _sele.onResolvedCallbacks.push(function () {
                setTimeout(function () {
                    try {
                        let x = onFulfilled(_sele.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e)
                    }
                })
            });
            _sele.onRejectedCallbacks.push(function () {
                setTimeout(function () {
                    try {
                        let x = onRejected(_sele.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                })
            });
        })

    }
    return promise2;
}

module.exports = Promise;复制代码
好了，一个完整的promise写完了，同学们联系的时候一定要记得引入自己写的promise文件哦！

对于以上代码实现，我们可以通过一个promises-aplus-tests的库来验证是否达成规范要求

可以通过npm install -g promises-aplus-tests,使用时直接promises-aplus-tests 文件名即可。

在Promise类上的挂方法

实现promise类上的 call,catch,race,resolve,reject等方法

// 捕获错误的方法
Promise.prototype.catch = function (callback) {
    return this.then(null, callback)
}

// 解析全部方法
// let arr = [];
// arr[1] = 100;
// console.log(arr.length)
Promise.all = function (promises) {
    //promises是一个promise的数组
    return new Promise(function (resolve, reject) {
        let arr = []; //arr是最终返回值的结果
        let i = 0; // 表示成功了多少次
        function processData(index, y) {
            arr[index] = y;
            if (++i === promises.length) {
                resolve(arr);
            }
        }
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(function (y) {
                processData(i, y)
            }, reject)
        }
    })
}

// 只要有一个promise成功了 就算成功。如果第一个失败了就失败了
Promise.race = function (promises) {
    return new Promise(function (resolve, reject) {
        for (var i = 0; i < promises.length; i++) {
            promises[i].then(resolve,reject)
        //这里详细解释一下
        //promise[i].then(function(data){
        //            resolve(data)  //只接收一个resolve，因为他们同属于最外层的new promise。
        //        },reject)
        }
    })
}

// 生成一个成功的promise
Promise.resolve = function(value){
    return new Promise(function(resolve,reject){
        resolve(value);
    })
}

// 生成一个失败的promise
Promise.reject = function(reason){
    return new Promise(function(resolve,reject){
        reject(reason);
    })
}

Promise.defer = Promise.deferred = function () {
    let dfd = {};
    dfd.promise = new Promise(function (resolve, reject) {
        dfd.resolve = resolve;
        dfd.reject = reject;
    });
    return dfd
}复制代码
用法如下 
Promise.defer = Promise.deferred = function () {
    let dfd = {};
    dfd.promise = new Promise(function (resolve, reject) {
        dfd.resolve = resolve;
        dfd.reject = reject;
    });
    return dfd
}

let Promise = require('./Promise');
function read() {
    let defer = Promise.defer()
    require('fs').readFile('./2.promise/1.txt', 'utf8', function (err, data) {
        if(err) defer.reject(err);
        defer.resolve(data);
    })
    return defer.promise;
}
read().then(function (data) {
    console.log(data)
},function(err){
    console.log(err);
})
复制代码











weixin_34351321
关注
手把手一行一行代码教你“手写Promise“，完美通过 Promises/A+ 官方872个测试用例
圆圆的 JavaScript 博客
12-20 1746
保姆级教程，看完还不懂的私聊我亲自教！
看了就会，手写 Promise 全部 API 教程，包括处于 TC39 第四阶段草案的 Promise.any()
圆圆的 JavaScript 博客
12-21 571
根据规范实现了 Promise ES6+ 的全部 API，手写实现了 then 方法以外的两个实例方法以及目前 Promise 规范的全部六个静态方法。
超详细！一次性搞懂手写Promise全过程
qq_41852789的博客
12-30 8667
手写promise超详细步骤，帮助大家理解每一步代码的含义
【JavaScript】手写Promise
编码世界
05-15 4719
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
手把手带你实现符合Promise/A+规范的Promise
C.
05-19 520
文章目录手把手带你实现符合Promise/A+规范的Promise什么是Promise/A+规范?一步步实现自定义Promise构造函数resolve 与 reject的构建与基础实现throw 抛出异常改变状态Promise的状态一旦改变，就不会再变then 方法执行回调基础实现异步任务 then 方法实现根据Promise/A+规范 优化then方法指定多个回调then 返回结果是一个新的promise对象The Promise Resolution ProcedurePromise.prototype
手写 Promise 全部 API 教程
frontend_frank的博客
02-22 387
前言我们在 上篇文章用了很大功夫实现了 Promise 的核心方法，并且通过了 Promises/A+ 官方872个测试用例测试，接下来实现这些静态方法已经是小菜一碟了，因为这些 API...
手把手教你写一个简易的微前端框架
2401_84617080的博客
06-20 664
/ 传给子应用的自定义参数/**loadApp() 必须返回一个 Promise，resolve() 后得到一个对象：*/
手把手教你写一个前端脚手架（2024-6-17）
hap1994的博客
06-17 1929
脚手架是什么，相信各位已经熟悉得不能再熟悉了，毕竟无论是vue开发者（vue-cli）还是react（create-react-app）开发者，他们都有各自的脚手架，个人虽是用react更多，但不得不说是更喜欢vue-cli的，它的插件机制非常有意思，虽不如webpack的plugin那么方便，但也很强大。不过再讲这强大的功能之前，原谅我先水一篇脚手架的基础。
手把手教你剖析,并手写十五个重要 API 的实现
画漫画的程序员∙苏南
09-27 84
点击上方关注“IT平头哥联盟”，选择“置顶或者星标”作者：神三元在面试中，常常会遇到一些手写XXX之类的面试题，因此好好总结一下，对于巩固我们的原生js的基础是非常必要的。尽管在网上已经有...
前端开发核心知识进阶
GitChat
07-02 4325
JS 异步编程的 5 种解决方案
圆圆的 JavaScript 博客
02-23 4928
异步为什么很重要？如何使用异步来有效处理潜在的阻塞操作？我们知道 JS 语言的执行环境是"单线程"，所谓"单线程"，就是指一次只能完成一件任务，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。...
2020年前端面试复习必读文章【超百篇文章赠复习导图】，移动开发工程师的发展路线
m0_64319112的博客
11-29 391
重新认识构造函数、原型和原型链 JavaScript深入之从原型到原型链 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一） 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二） 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三） JavaScript 引擎基础：原型优化 Prototypes in JavaScript JavaScript深入之创建对象的多种方式以及优缺点 详解JS原型链与继承 从__proto__和prototype来深入理解JS对象和原型链 代码复用模式.
numexpr-2.8.3-cp38-cp38-win_amd64.whl
10-14
numexpr-2.8.3-cp38-cp38-win_amd64.whl
ujson-5.3.0-cp311-cp311-win_amd64.whl
10-14
ujson-5.3.0-cp311-cp311-win_amd64.whl
基于MATLAB车牌识别程序技术实现面板GUI.zip
10-14
vos3000
RJFireWall-maste赛资源
10-14
RJFireWall-maste赛资源
msgpack-1.0.4-cp39-cp39-win_amd64.whl
10-14
msgpack-1.0.4-cp39-cp39-win_amd64.whl
基于 YOLOv11 的混凝土缺陷检测系统（包含详细的完整的程序和数据）
10-14
内容概要：本文提供了从零开始搭建的基于 YOLOv11 模型的混凝土缺陷检测系统教程，覆盖了整个流程，如开发配置指导，训练集搭建、模型的使用方法到最终集成图形界面交付应用等内容，尤其注重图像预处理及增广手段的有效利用，帮助读者建立高效的系统以满足工程中的实时监测需求。此外还包括对未来发展方向的具体展望，比如引入新型检测器或进一步扩展故障类别。 适合人群：适用于具有一定Python基础、想探索目标检测领域尤其是从事土木工程质量监督的技术工作者。 使用场景及目标：适合对有形结构如混凝土建筑的质量检验需要的公司部门，以提高检测的精确度同时加快检测流程的速度。 其他说明：项目代码附在文中，方便大家快速上手测试并进一步深入研究。对于那些对模型效果不满意的，本文给出了提升系统效能的具体注意点，譬如持续优化迭代以及增加系统设置自由度。
用 Python 实现简单网页爬虫并保存为CSV教程.txt
最新发布
10-14
本文提供了详细的步骤教您构建基于Python的网页爬虫程序，主要讲解了如何获取并解析指定新闻网站的文章标题及其URL。它通过使用Python内置包：Requests，BeautifulSoup和Pandas三个开源软件包完成数据采集和存盘任务。 适合人群：有一定的编程技能且正在学习或已经初步掌握了爬虫基础知识的技术员或学生。 使用场景及目标：①从网络上自动拉去大量信息，降低人工收集的成本;②将爬虫获得的一手资料存档进表格形式。 此外：由于每个网站的架构各异，所以务必在实际工作中注意调整细节参数；并且在做互联网抓取时需关注相关法律法规，不可随意触犯他人的合法权益，尤其应注意机器人协议（Robots.txt）。
手把手教你实现JavaScript Promise基础及A+规范
文章的核心部分介绍了实现一个名为`MyPromise`的基本类，该类包含四个方法：`constructor`用于初始化异步操作，`resolve`用于将Promise标记为已完成并传递结果，`reject`用于标记Promise为已拒绝并提供原因，以及`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值