手写一个promise用法_手写系列之实现一个Promise-白红宇的个人博客

发布日期：2021-06-24 11:18:19 浏览次数：5 分类：技术文章

本文共 3068 字，大约阅读时间需要 10 分钟。

Promise 是一个异步操作返回的对象，用来传递异步操作的消息。基本使用可以看阮一峰老师的《ECMAScript 6 入门》。

下面是根据自己对 Promise 的理解，实现一个Promise :

实现一个Promise

Promise 有三种状态：Pending 初始态； Fulfilled 成功态； Rejected 失败态。

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) {
            if(self.status === 'pending') {
                self.status = 'rejected';            self.reason = reason;        }    }    try{
            executor(resolve, reject);    }catch(e){
            reject(e);// 捕获时发生异常，就直接失败    }}//onFufiled 成功的回调//onRejected 失败的回调Promise.prototype.then = function (onFufiled, onRejected) {
        let self = this;    if(self.status === 'resolved'){
            onFufiled(self.value);    }    if(self.status === 'rejected'){
            onRejected(self.reason);    }}module.exports = Promise;

测试一下：

let Promise = require('./Promise');let promise = new Promise(function (resolve, reject) {
        resolve(100);})promise.then(function (data) {
        console.log('data:', data);},function (err) {
        console.log('err:', err);})

输出：data: 100

测试成功啦鼓掌鼓掌 ~

Promise 实例可以多次then，当成功后会将 then 中的成功方法按顺序执行，我们可以先将 then 中成功的回调和失败的回调存到数组内。当成功的时候调用成功的数组即可。

self.onResolvedCallbacks = [];  /* 存放then成功的回调*/self.onRejectedCallbacks = [];  /* 存放then失败的回调*/function resolve(value){
        if(self.status === 'pending'){
            self.status = 'resolved';        self.value = value;        self.onResolvedCallbacks.forEach(function (fn) {
                fn();        })    }}function reject(reason) {
        if(self.status === 'pending') {
            self.status = 'rejected';        self.reason = reason;        self.onRejectedCallbacks.forEach(function (fn) {
                fn();        })    }}if(self.status === 'pending'){
        self.onResolvedCallbacks.push(function () {
            onFufiled(self.value);    })    self.onRejectedCallbacks.push(function () {
            onRejected(self.reason);    })}

实现链式调用

众所周知 Promise 的一大特点，就是链式调用。而 Promise 实现链式调用就是通过 then 方法返回一个新的 Promise。

如果第一个 then 中返回了一个结果，会将 Promise 的结果继续传给下一个 then 中；如果有错误则走下一个 then 的失败。

// 添加 resolvePromise 方法 处理链式调用问题function resolvePromise(p2, x, resolve, reject) {
        if(p2 === x){
            return reject(new TypeError('循环引用'));    }    if(x!==null || (typeof x === 'object' || typeof x === 'function')){
            try{
                let then = x.then;            if(typeof then === 'function'){
                    then.call(x, function (y) {
                        resolvePromise(promise2, y, resolve, reject);                },function (err) {
                        reject(err);                });            }else{
                    resolve(x);            }        }catch(e){
                reject(e);        }    }else{
            resolve(x);    }}

以上只是自己的一些浅显的理解，如有问题，还请指正。

如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！

转载地址：https://blog.csdn.net/weixin_32467421/article/details/112415336 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：数字拆分问题算法回溯_学会了回溯算法，我终于会做数独了

下一篇：python制作表格处理软件_震惊！当Python遇到Excel后，将开启你的认知虫洞

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

实现一个Promise

实现链式调用

发表评论

最新留言

关于作者

推荐文章