手写Promise源码的实现思路

已于 2023-04-12 09:42:56 修改
阅读量1.4k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端
于 2023-03-22 22:19:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37922443/article/details/129720681
版权

Promise的使用：

let promise = new Promise((resolve, reject) => {
    resolve("OK");
    // reject("Error");
});

console.log(promise);

promise.then(value => {
    console.log("success");
}, error => {
    console.log("fail");
});

  1. 定义构造函数中的两个基本属性PromiseState，PromiseResult

    function Promise() {
    this.PromiseState = "pending";
    this.PromiseResult = null;
}

  2. 由于实例对象中传递的参数是一个执行器函数，并且会立即执行这个函数。

    function Promise(executor) {
    this.PromiseState = "pending";
    this.PromiseResult = null;
    
    executor();
}

  3. 该执行器函数中有两个函数参数，调用任意一个函数会改变promise的状态和结果值，且状态只能改变一次。

    function Promise(executor) {
    this.PromiseState = "pending";
    this.PromiseResult = null;
    
    // 防止this指向window
    const self = this;
    function resolve(value) {
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "fulfilled";
        self.PromiseResult = value;
    }
    
    function reject(reason) {
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "rejected";
        self.PromiseResult = reason;
    }
    // 参数为一个函数且立即执行，该函数需要两个函数参数改变promise的状态和结果值
    executor(resolve, reject);
}

  4. 还有一种情况：promise实例执行结果为抛出异常，需要让其状态为失败。

    function Promise(executor) {
    // ...
    
    // 参数为一个函数且立即执行，该函数需要两个函数参数改变promise的状态和结果值；抛出异常时状态为失败
    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error);
    }
}

  5. 在对象原型上添加then方法。

    Promise.prototype.then = function(onResolved, onRejected) {
    if(this.PromiseState === "fulfilled") {
        onResolved();
    }
    if(this.PromiseState === "rejected") {
        onRejected();
    }
}

  6. executor的执行内容是异步的，应该等到异步执行后改变了状态才能执行then中的回调函数，异步执行前状态还是为pending。

    let promise = new Promise((resolve, reject) => {
    setTimeout(()=> {
        resolve("OK");
    }, 1000);
});

    function Promise(executor) {
    // ...
    this.callback = null;

    // 防止this指向window
    const self = this;
    function resolve(value) {
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "fulfilled";
        self.PromiseResult = value;
        if(self.callback.onResolved) {
            self.callback.onResolved();
        }
    }
    
    function reject(reason) {
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "rejected";
        self.PromiseResult = reason;
        if(self.callback.onRejected) {
            self.callback.onRejected();
        }
    }
    // ...
}

// then方法
Promise.prototype.then = function(onResolved, onRejected) {
    // ...
    if(this.PromiseState === "pending") {
        // 此时还未改变promise的状态，回调函数无法立即执行，只能先保存下来
        this.callback = {
            onResolved,
            onRejected
        };
    }
}

  7. 当一个Promise实例执行了多个then方法时，两个then里的方法都会执行。

    let promise = new Promise((resolve, reject) => {
    resolve("OK");
});

promise.then(value => {
    console.log("success");
}, error => {
    console.log("fail");
});

promise.then(value => {
    console.log("success2");
}, error => {
    console.log("fail2");
});
// success success2

    function Promise(executor) {
    // ...
    this.callbacks = [];

    // 防止this指向window
    const self = this;
    function resolve(value) {
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "fulfilled";
        self.PromiseResult = value;
        self.callbacks.forEach(item => {
            item.onResolved();
        });
    }
    
    function reject(reason) {
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "rejected";
        self.PromiseResult = reason;
        self.callbacks.forEach(item => {
            item.onRejected();
        });
    }
    // ...
}

// then方法
Promise.prototype.then = function(onResolved, onRejected) {
    // ...
    if(this.PromiseState === "pending") {
        // 此时还未改变promise的状态，回调函数无法立即执行，只能先保存下来
        this.callbacks.push({
            onResolved,
            onRejected
        });
    }
}

  8. then方法返回的也是一个Promise实例，这个实例的状态由执行的回调函数的结果来决定，如果回调函数的执行内容是非Promise实例，则都为成功状态；如果是Promise实例，状态根据这个实例的状态来定。

    • executor执行内容为同步时：

      Promise.prototype.then = function(onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
        if(self.PromiseState === "fulfilled") {
            // 拿到回调函数的返回值
            // Promise实例：根据其结果状态决定then执行后该实例的状态；非Promise实例：状态都为成功
            const result = onResolved(self.PromiseResult);
            if(result instanceof Promise) {
                // 既然是一个Promise实例，就能根据该实例的执行内容确定状态
                result.then(v => {
                    resolve(v);
                }, r => {
                    reject(r);
                });
            } else {
                resolve(result);
            }
        }
        if(self.PromiseState === "rejected") {
            // 同上
            const result = onRejected(self.PromiseResult);
            if(result instanceof Promise) {
                result.then(v => {
                    resolve(v);
                }, r => {
                    reject(r);
                });
            } else {
                resolve(result);
            }
        }
        }
        // ...
    })
}

    • executor执行内容为异步时：

      Promise.prototype.then = function(onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
        // ...
        if(self.PromiseState === "pending") {
            // 此时还未改变promise的状态，回调函数无法立即执行，只能先保存下来
            self.callbacks.push({
                onResolved: function() {
                    // 同上
                    const result = onResolved(self.PromiseResult);
                    if(result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        });
                    } else {
                        resolve(result);
                    }
                },
                onRejected: function() {
                    // 同上
                    const result = onRejected(self.PromiseResult);
                    if(result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        });
                    } else {
                        resolve(result);
                    }
                }
            });
        }
    })
}

  9. 封装then方法中出现的重复代码，并处理

    Promise.prototype.then = function(onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
        // 封装函数：根据结果改变状态
        function callback(fn) {
            try {
                // 拿到回调函数的返回值
                // Promise实例：根据其结果状态决定then执行后该实例的状态；非Promise实例：状态都为成功
                let result = fn(self.PromiseResult);
                if(result instanceof Promise) {
                    // 既然是一个Promise实例，就能根据该实例的执行内容确定状态
                    result.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    });
                } else {
                    resolve(result);
                }
            } catch (error) {
                reject(error);
            }
        }

        if(self.PromiseState === "fulfilled") {
            callback(onResolved);
        }
        if(self.PromiseState === "rejected") {
            callback(onRejected);
        }
        if(self.PromiseState === "pending") {
            // 此时还未改变promise的状态，回调函数无法立即执行，只能先保存下来
            self.callbacks.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            });
        }
    })
}

  10. 添加catch方法并实现异常穿透，同时实现then只传递一个参数和不传递参数的情况。

    // 使用
promise.then(value => {
    return new Promise((resolve, reject) => {
        reject("111 error")
    })
}).then((value) => {
    console.log(222)
}).catch(err => {
    console.log("err-------------")
    console.log(err)
});

    // then方法
Promise.prototype.then = function(onResolved, onRejected) {
    const self = this;
    // 不传第二个函数时，默认函数为一个抛出异常操作
    if(typeof onRejected !== "function") {
        onRejected = reason => {
            throw reason;
        }
    }
    // 不传第一个函数时，默认将实例结果值返回，可以实现成功时的值传递
    if(typeof onResolved !== "function") {
        onResolved = value => value;
    }

    return new Promise((resolve, reject) => {
        // ...
    })
}

// catch方法
Promise.prototype.catch = function(onRejected) {
    return this.then(undefined, onRejected);
}

  11. 添加Promise.resolve和Promisereject方法。

    // resolve方法：根据传入参数的类型决定结果的状态
Promise.resolve = function(value) {
    return new Promise((resolve, reject) => {
        if(value instanceof Promise) {
            // 既然是一个Promise实例，就能根据该实例的执行内容确定状态
            value.then(v => {
                resolve(v);
            }, r => {
                reject(r);
            });
        } else {
            resolve(value);
        }
    })
}

// reject方法：无论传入的参数是什么类型，结果都是失败状态
Promise.reject = function(reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    })
}

  12. 添加Promise.all方法：所有实例都成功则为成功，结果值为所有实例结果值组成的数组；有一个失败，则为失败，结果值为失败的实例的结果值。

    Promise.all = function(promises) {
    return new Promise((resolve, reject) => {
        let count = 0,
            resultArr = [];
        promises.forEach((item, index) => {
            item.then(v => {
                count++;
                // 按实例的索引值存储其对应结果
                resultArr[index] = item.PromiseResult;
                // 全部都为成功时为成功
                if(count === promises.length) {
                    resolve(resultArr);
                }
            }, r => {
                reject(r);
            });
        });
    })
}

  13. 添加Promise.race方法：实例中谁先改变状态，返回的状态和结果值就为该实例的状态和结果值。

    Promise.race = function(promises) {
    return new Promise((resolve, reject) => {
        promises.forEach(item => {
            item.then(v => {
                resolve(v);
            }, r => {
                reject(r);
            });
        });
    })
}

  14. then方法是一个异步任务。

    function Promise(executor) {
    // ...

    // 防止this指向window
    const self = this;
    function resolve(value) {
        // ...
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved();
            });
        });
    }
    
    function reject(reason) {
        // ...
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onRejected();
            });
        });
    }
    // 参数为一个函数且立即执行，该函数需要两个函数参数改变promise的状态和结果值；抛出异常时状态为失败
    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error);
    }
}

// then方法
Promise.prototype.then = function(onResolved, onRejected) {
    // ...

    return new Promise((resolve, reject) => {
        // ...
        
        if(self.PromiseState === "fulfilled") {
            setTimeout(() => {
                callback(onResolved);
            });
        }
        if(self.PromiseState === "rejected") {
            setTimeout(() => {
                callback(onRejected);
            });
        }
        // ...
    })
}

调整一下代码结构，整个promise.js源码如下：

function Promise(executor) {
    this.PromiseState = "pending";
    this.PromiseResult = null;
    this.callbacks = [];

    // 防止this指向window
    const self = this;
    function resolve(value) {
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "fulfilled";
        self.PromiseResult = value;
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved();
            });
        });
    }
    
    function reject(reason) {
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "rejected";
        self.PromiseResult = reason;
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onRejected();
            });
        });
    }
    // 参数为一个函数且立即执行，该函数需要两个函数参数改变promise的状态和结果值；抛出异常时状态为失败
    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error);
    }
}

// then方法
Promise.prototype.then = function(onResolved, onRejected) {
    // 不传第一个函数时，默认将实例结果值返回，可以实现成功时的值传递
    if(typeof onResolved !== "function") {
        onResolved = value => value;
    }
    // 不传第二个函数时，默认函数为一个抛出异常操作
    if(typeof onRejected !== "function") {
        onRejected = reason => {
            throw reason;
        }
    }

    const self = this;
    return new Promise((resolve, reject) => {
        // 封装函数：根据结果改变状态
        function callback(fn) {
            try {
                // 拿到回调函数的返回值
                // Promise实例：根据其结果状态决定then执行后该实例的状态；非Promise实例：状态都为成功
                let result = fn(self.PromiseResult);
                if(result instanceof Promise) {
                    // 既然是一个Promise实例，就能根据该实例的执行内容确定状态
                    result.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    });
                } else {
                    resolve(result);
                }
            } catch (error) {
                reject(error);
            }
        }

        if(self.PromiseState === "pending") {
            // 此时还未改变promise的状态，回调函数无法立即执行，只能先保存下来
            self.callbacks.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            });
        } else if(self.PromiseState === "fulfilled") {
            setTimeout(() => {
                callback(onResolved);
            });
        } else if(self.PromiseState === "rejected") {
            setTimeout(() => {
                callback(onRejected);
            });
        }
        
    })
}

// catch方法
Promise.prototype.catch = function(onRejected) {
    return this.then(undefined, onRejected);
}

// resolve方法：根据传入参数的类型决定结果的状态
Promise.resolve = function(value) {
    return new Promise((resolve, reject) => {
        if(value instanceof Promise) {
            // 既然是一个Promise实例，就能根据该实例的执行内容确定状态
            value.then(v => {
                resolve(v);
            }, r => {
                reject(r);
            });
        } else {
            resolve(value);
        }
    })
}

// reject方法：无论传入的参数是什么类型，结果都是失败状态
Promise.reject = function(reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    })
}

// all方法
Promise.all = function(promises) {
    return new Promise((resolve, reject) => {
        let count = 0,
            resultArr = [];
        promises.forEach((item, index) => {
            item.then(v => {
                count++;
                // 按实例的索引值存储其对应结果
                resultArr[index] = item.PromiseResult;
                // 全部都为成功时为成功
                if(count === promises.length) {
                    resolve(resultArr);
                }
            }, r => {
                reject(r);
            });
        });
    })
}

// race方法
Promise.race = function(promises) {
    return new Promise((resolve, reject) => {
        promises.forEach(item => {
            item.then(v => {
                resolve(v);
            }, r => {
                reject(r);
            });
        });
    })
}
Seven_5477
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手写Promise源码
weixin_48820137的博客
09-28 118
手写Promise源码 // promise有三种状态 pending 等待 fulfilled 成功 rejected 失败 // 且状态改变只能从pending -> fulfilled(从等待到成功) 或者 pending -> rejected(从等待到失败) 且状态改变后不可更改 // 声明三种状态常量 const PENDING = ‘pending’ const FULFILLED = ‘fulfilled’ const REJECTED = ‘rejected’ // 创建Pro
JS手写Promise源码
最新发布
12-19
为什么要手写Promise？1、深入理解Promise的工作原理：手写Promise可以帮助我们更深入地理解Promise的工作原理和内部机制。通过手动实现Promise的核心功能，如异步调用、状态管理和回调处理，我们可以更好地理解...
Promise实现原理（附源码）
shentibeitaokong的博客
09-26 6671
写的是真的好，详细，特此转载保存一下。  本篇文章主要在于探究 Promise 的实现原理，带领大家一步一步实现一个 Promise , 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。 接下来，带你一步一步实现一个 Promise 1. Promise 基本结构 new Promise((resolve, reject) =...
手写 Promise 源码实现
仔柯的博客
06-30 223
1、promise就是一个类
手写Promise.js
11-13
Promise的手写代码，请配合博客《JavaScprit》异步编程（三）深入浅出Promise使用
fackAchieve:手写ES6高级函数，手写Promise，模拟数据结构 ,手写常用工具库函数及框架源码模拟实现
05-14
手写 es6 函数，Promise 特性，lodash 库的函数实现,模拟 vue,React 等前端框架的实现和原理的理解。 functions 文件夹 手动实现各种函数，包括不限于 ES6 等函数的方法 内容对应表 Array 方法名称(name) 位置...
前端面试大厂手写源码系列（上）
01-08
这个"前端面试大厂手写源码系列（上）"将探讨CSS和JavaScript部分的关键手写原理题目，特别是JavaScript中的原生Ajax实现，以及防抖和节流函数。 首先，我们来看原生Ajax的实现。Ajax全称为"Asynchronous ...
js中的switch case语句，case指定多个条件时的写法
热门推荐
m0_37922443的博客
02-19 3万+
let a = 1; switch(a){ case 1 || 0: console.log("aaa"); break; default: console.log("else"); } 输出的结果为：aaa 当把a的值改为0的时候，想要的结果是aaa，但是结果却为：else，什么原因呢？ 在js中，case后面的语句是一个整体的表达式，不能拆分开，就是说这里的case 1 || 0其实相当于case (1 || 0)。 （1 || 0）的值为1，当
在正则表达式中，^ 和 $ 同时出现的含义
m0_37922443的博客
12-15 4716
^ ：以哪个元字符作为开始； $ ：以哪一个元字符作为结束。 例： /^a/ 匹配以a字符作为开头的字符串 /^abc/ 以abc字符串为开头 /^\d/ 以数字作为开头 /abc$/ 以abc作为结束 /\d$/ 以数字作为结束 当 ^ 和 $ 同时出现时，表示只能匹配 ^ 和 $ 之间的内容，例： /^abc$/ 只能匹配'abc' 表示开始和结尾都是"abc"的字符串：容易被理解为abcabc这种形式的也是可以的，但其实不行。 准确来说这么理解： 必须以a开头，必须以c结束
js简单实现鼠标拖拽功能：盒子可以跟着鼠标移动位置
m0_37922443的博客
01-20 2021
实现的原理： 根据上面的图可以算出移动后的盒子的left和top： 鼠标距离边界的值： ev.pageY - box.top ev.pageX - box.left box2.top = ev2.pageY - (ev1.pageY - box1.top) = ev2.pageY - ev1.pageY + box1.top box2.left = ev2.pageX - (ev1.pageX - box1.left) = ev2.pageX - ev1.pageX + box1.left 代码如下： &
js利用web-worker开一个新线程计算大文件的MD5值，不影响主线程的代码运行
m0_37922443的博客
04-09 2025
在写上传文件这个功能的时候，需要得到文件的MD5值。 小文件（100M以内）的MD5值可以1秒内算出，但是大文件会比较耗时间，比如计算一个500M的文件需要10S左右。 我先选择文件1（500M）上传，正在计算MD5值，我又选择一个文件2上传，会打断文件1的MD5计算，这样显然是不行的。 所以，需要开一个子线程来计算MD5值，且不影响主线程。 MD5的计算：基于spark切片。 注：用到worker需要用服务器方式打开：（vscode） HTML代码： <!DOCTYPE html> <
前端播放语音流方案
m0_37922443的博客
09-29 2017
当前项目需要前端播放语音，调用语音合成接口，会拿到一段语音流。
js函数内部return一个函数，自动调用toString方法
m0_37922443的博客
02-25 1499
学习闭包的时候，发现这么一段代码： function add(m) { var tmp = function (n) { return add(m+n); }; tmp.toString = function () { return m; }; return tmp; } console.log(add(1)(2)); 刚开始看的时候，不明白为什么要改写toString方法，查了一些资料，都没有直观地讲是怎么回事，后来自己测试，终于想
用JS+JQuery实现无缝连接的轮播图：自动轮播，手动轮播
m0_37922443的博客
12-25 1159
我之前写过一个简易版的自动+手动轮播图：简易轮播图 但是这个轮播图在切换的时候是没有实现无缝滚动的，每张图片都是单张切换的，而不是滑动。现在用JQuery实现无缝连接的轮播图。 轮播图的原理如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无缝轮播图</title> </head> <style type="text/cs
js利用vue数据监听原理Object.defineProperty实现语音播放监听
m0_37922443的博客
02-28 870
利用vue数据监听原理Object.defineProperty实现语音播放监听
js中不同数据类型之间的比较规则
m0_37922443的博客
02-19 753
数据类型之间的比较规则： {} == {} ：两个对象进行比较，比较的是堆内存的地址 null == undefined => true; null===undefined => false NaN == NaN => false ： NaN和谁都不相等 对象和字符串进行比较，是把对象toString()转换为字符串后再比较 剩余的所有数据类型不一样的情况：都是先转换为数字 （1）对象转数字：先转换为字符串，再转换为数字 （2）字符串转换为数字：只要出现非数字字符，结果就是NaN （3
手写Promise思路
05-01
Promise 是 JavaScript 中用于处理异步操作的一种方式，它可以让异步操作更加优雅和易于管理。下面是手写 Promise 的思路： ...以上是手写 Promise 的基本思路，具体实现可以参考 Promise/A+ 规范。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值