史上最简单的手写Promise,仅17行代码即可实现Promise链式调用
Promise的使用相比大家已经孰能生巧了,我这里就不赘述了
先说说我写的Promise的问题吧,无法实现宏任务和微任务里的正确执行(也就是在Promise里面写setTimeout,setInterval的话,输出顺序会有问题),其他的API(catch、finally、race、all)有兴趣的话,大家可以斟酌补充。
开始贴代码:
// 定义一个Promise类
function Promise(fn){
// 回调队列 存放的所有的.then里面的回调 this.callbacks = [];
// resolve(val)后 真正被执行的代码 let resolve = (val) => {
// resolve 调用是异步的(微任务) setTimeout(()=>{
// 从回调队列的头部拿一个回调方法 let callback = this.callbacks.shift();
// 执行回调方法并获取返回值 pms let pms = callback.call(this,val)
// 容错处理 如果pms有值 再赋值 if(pms){
// 将回调队列赋值给下一个promise pms.callbacks = this.callbacks; } }, 0) }
// fn是初始化promise传入的 执行函数 是同步执行的 传入我们的resolve函数 fn.call(this,resolve) }
// 实现then方法 Promise.prototype.then =function(cb){
//将回调函数放至回调队列里 this.callbacks.push(cb);
// return this 实现链式调用 return this; }
测试代码
new Promise ((resolve,reject)=>{ console.log(1) resolve(3); }).then(val=>{ console.log(val) return new Promise ((resolve,reject)=>{ resolve(4) }) }).then(val=>{ console.log(val) return new Promise((resolve,reject) => { resolve(5) }) }).then(val=>{ console.log(val) }) console.log(2)