手写Promise核心

本文详细介绍了一个简单的Promise实现过程,包括核心状态管理、异步处理、链式调用、错误捕获及静态方法实现等关键部分。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


注意异步操作和处理异常

起步构建

状态、值、executor、resolve、reject

由于状态只改变一次,所以在resolve和reject改变状态之前要先判断当前是否为pending状态。

注意处理异常:如在executor中调用resolve或reject的时候传入未定义变量。因此需要在executor外层加上try-catch捕获异常。将报错信息作为rejected状态下promise的值。

class myPromise{
    static PENDING='pending';
    static FULLFILLED='fullfilled';
    static REJECTED='rejected';

    constructor(executor){
        this.status=myPromise.PENDING;
        this.value=null;
        try {
            executor(this.resolve.bind(this),this.reject.bind(this));
        } catch (error) {
            this.reject(error);
        }
    }
    
    resolve(value){
        if(this.status==myPromise.PENDING){
            this.status=myPromise.FULLFILLED;
            this.value=value;
        }
    }
    reject(reason){
        if(this.status==myPromise.PENDING){
            this.status=myPromise.REJECTED;
            this.value=reason;
        }
    }
}

测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script src='myPromise.js'></script>
<script>
    const p=new myPromise((resolve,reject)=>{
        resolve('成功啦');
    });
    console.log(p);
</script>
</body>
</html>

在这里插入图片描述

const p=new myPromise((resolve,reject)=>{
    resolve(a);
});
console.log(p);

在这里插入图片描述

then()、链式调用

  • 调用then的时候传入的参数可能不是函数类型,这个时候就需要自定义成功或者失败的回调。由于then具有穿透功能,因此当未传入回调时,直接返回当前value值
if(typeof onFullfilled!='function'){
    onFullfilled=()=>this.value;
}
if(typeof onRejected!='function'){
    onRejected=()=>this.value;
}
  • then方法返回值是一个新的promise

  • 异步执行(executor中的异步性、resolve、reject)、异常处理

  • 在executor中加定时器(setTimeout会将resolve放入回调队列,等其他操作顺序执行完之后才调用),调用then的时候当前promise仍是pending状态。由于每个promise都必定会经过状态为pending的时候,因此我们可以定义一个callbacks数组存储将要被调用的onFullfilled、onRejected回调,此操作放在pending状态的时候执行。当状态改变时将callbacks数组中的回调全部调出来执行,此操作在resolve()和reject()中处理。

    • 测试——没加callbacks处理的时候:
const p=new myPromise((resolve,reject)=>{
   setTimeout(()=>{
       resolve('成功');
   },100);
});
const p1=p.then(value=>{
   console.log(value);
});
console.log(p1);

在这里插入图片描述

  • 处理后:
    在这里插入图片描述
then(onFullfilled,onRejected){
        if(typeof onFullfilled!='function'){
            onFullfilled=()=>this.value;
        }
        if(typeof onRejected!='function'){
            onRejected=()=>this.value;
        }

        return new myPromise((resolve,reject)=>{
            if(this.status==myPromise.PENDING){
                this.callbacks.push({
                    Full:value=>{
                        try {
                            let result=onFullfilled(value);
                            resolve(result);
                        } catch (error) {
                            reject(error);
                        }
                    },
                    Reject:reason=>{
                        try {
                            let result=onRejected(reason);
                            resolve(result);
                        } catch (error) {
                            reject(error);
                        }
                    }
                });
            }
            if(this.status==myPromise.FULLFILLED){
                setTimeout(()=>{
                    try {
                        let result=onFullfilled(this.value);
                        resolve(result);
                    } catch (error) {
                        reject(error);
                    }
                });
            }
            if(this.status==myPromise.REJECTED){
                setTimeout(()=>{
                    try {
                        let result=onRejected(this.value);
                        resolve(result);
                    } catch (error) {
                        reject(error);
                    }
                });
            }
        });
    }

then中回调的返回值类型

无论当前promise成功与否,都返回一个成功的promise,一般情况下,成功/失败的返回值即作为新的promise的值,若返回的是promise对象(通过instanceof判断),那么将该promise对象的值作为新promise的值(此处未处理当前promise中抛出异常的情况)

处理返回promise的情况(resolve):

try {
    let result=onFullfilled(value);
    if(result instanceof myPromise){
        result.then(resolve,reject);
    }else{
        resolve(result);
    }
} catch (error) {
    reject(error);
}

测试(then穿透、resolve异步、链式、then回调返回promise):

const p=new myPromise((resolve,reject)=>{
   setTimeout(()=>{
       resolve('成功啦');
   },100);
});
p.then()
.then(value=>{
   console.log(value);
   return new myPromise((resolve,reject)=>{
       resolve('成功回调返回的promise又成功啦');
   })
})
.then(value=>{
   console.log(value);
});

console.log('输出在最后');

在这里插入图片描述

代码优化、返回约束

then返回的promise不能是then相同的peomise(可输出)
而我们目前的promise是没有这个功能的

系统Promise:

const p=new Promise((resolve,reject)=>{
    resolve('成功啦');
});
const res=p.then(value=>{
    // console.log(res);
    return res;
});

在这里插入图片描述

解决方法:
在then中的回调函数中判断返回的promise是否是当前promise,是则抛出异常,并且以上代码多处重复,可通过封装函数,将promise和回调返回结果result作为参数传递。

parse(promise,result,resolve,reject){
      if(promise==result){
          throw new TypeError('Chaining cycle detected for promise #<Promise>');
      }
      try {
          if(result instanceof myPromise){
              result.then(resolve,reject);
          }else{
              resolve(result);
          }
      } catch (error) {
          reject(error);
      }
  }

定义一个变量promise存then()中要返回的promise,并且在then末尾返回该变量

then(onFullfilled,onRejected){
    if(typeof onFullfilled!='function'){
        onFullfilled=()=>this.value;
    }
    if(typeof onRejected!='function'){
        onRejected=()=>this.value;
    }

    const promise=new myPromise((resolve,reject)=>{
        if(this.status==myPromise.PENDING){
            this.callbacks.push({
                Full:value=>{
                    this.parse(promise,onFullfilled(value),resolve,reject);
                },
                Reject:reason=>{
                    this.parse(promise,onRejected(reason),resolve,reject);
                }
            });
        }
        if(this.status==myPromise.FULLFILLED){
            setTimeout(()=>{
                this.parse(promise,onFullfilled(this.value),resolve,reject);
            });
        }
        if(this.status==myPromise.REJECTED){
            setTimeout(()=>{
                this.parse(promise,onRejected(this.value),resolve,reject);
            });
        }
    });
    return promise;
}

测试:

const p=new myPromise((resolve,reject)=>{
    resolve('成功啦');
});
const res=p.then(value=>{
    console.log(res);
    return res;
});

在这里插入图片描述

静态resolve()和reject()

静态的resolve()和reject()的实现和then()中的回调类似

static resolve(value){
    return new myPromise((resolve,reject)=>{
        if(value instanceof myPromise){
            value.then(resolve,reject);
        }else{
            resolve(value);
        }
    })
}

static reject(reason){
    return new myPromise((resolve,reject)=>{
        reject(reason);
    })
}

all(promises)

all()参数为一个promise数组,当且仅当promises数组中所有promise都成功时才返回一个成功的promise,否则为失败。

实现:遍历循环promises数组,执行每个promise的then方法,定义一个values数组存放成功的值,若values的数组大小和promises大小相等就说明所有promise都成功,此时返回一个成功的promise,其值即values数组,若有promise失败则直接调用reject()返回一个失败的promise

static all(promises){
    let values=[];
    return new myPromise((resolve,reject)=>{
        promises.forEach(promise => {
            promise.then(value=>{
                values.push(value);
                if(values.length==promises.length){
                    resolve(values);
                }
            },reason=>{
                reject(reason);
            });
        });
    })
} 

测试:

  • 全部成功的情况:
const p1=myPromise.resolve('成功啦');
const p2=myPromise.resolve('又成功啦');
myPromise.all([p1,p2]).then(value=>{
    console.log(value);
},reason=>{
    console.log(reason);
});

在这里插入图片描述

  • 含失败情况
    const p1=myPromise.resolve('成功啦');
    const p2=myPromise.resolve('又成功啦');
    const p3=myPromise.reject('失败啦');
    myPromise.all([p1,p2,p3]).then(value=>{
        console.log(value);
    },reason=>{
        console.log(reason);
    });

在这里插入图片描述

race(promises)

race()的参数也是一个promise数组,该方法根据数组中最先执行完的promise返回一个新的promise,其实只需要遍历循环promises数组,每个元素执行一次then方法就好了

static race(promises){
    return new Promise((resolve,reject)=>{
        promises.forEach(promise=>{
            promise.then(value=>{
                resolve(value);
            },reason=>{
                reject(reason);
            });
        })
    })
}

测试:

const p1=new myPromise((resovle,reject)=>{
    setTimeout(()=>{
        resovle('成功啦');
    },100);
});
const p2=new myPromise((resovle,reject)=>{
    setTimeout(()=>{
        reject('失败啦');
    },200);
})

myPromise.race([p1,p2]).then(value=>{
    console.log(value);
},reason=>{
    console.log(reason);
});

在这里插入图片描述

完整代码

class myPromise{
    static PENDING='pending';
    static FULLFILLED='fullfilled';
    static REJECTED='rejected';

    constructor(executor){
        this.status=myPromise.PENDING;
        this.value=null;
        this.callbacks=[];
        try {
            executor(this.resolve.bind(this),this.reject.bind(this));
        } catch (error) {
            this.reject(error);
        }
    }
    
    resolve(value){
        if(this.status==myPromise.PENDING){
            this.status=myPromise.FULLFILLED;
            this.value=value;

            setTimeout(()=>{
                this.callbacks.map(callback=>{
                    callback.Full(value);
                })
            });
        }
    }
    reject(reason){
        if(this.status==myPromise.PENDING){
            this.status=myPromise.REJECTED;
            this.value=reason;

            setTimeout(()=>{
                this.callbacks.map(callback=>{
                    callback.Reject(reason);
                })
            });
        }
    }

    then(onFullfilled,onRejected){
        if(typeof onFullfilled!='function'){
            onFullfilled=()=>this.value;
        }
        if(typeof onRejected!='function'){
            onRejected=()=>this.value;
        }

        const promise=new myPromise((resolve,reject)=>{
            if(this.status==myPromise.PENDING){
                this.callbacks.push({
                    Full:value=>{
                        this.parse(promise,onFullfilled(value),resolve,reject);
                    },
                    Reject:reason=>{
                        this.parse(promise,onRejected(reason),resolve,reject);
                    }
                });
            }
            if(this.status==myPromise.FULLFILLED){
                setTimeout(()=>{
                    this.parse(promise,onFullfilled(this.value),resolve,reject);
                });
            }
            if(this.status==myPromise.REJECTED){
                setTimeout(()=>{
                    this.parse(promise,onRejected(this.value),resolve,reject);
                });
            }
        });
        return promise;
    }

    parse(promise,result,resolve,reject){
        if(promise==result){
            throw new TypeError('Chaining cycle detected for promise #<Promise>');
        }
        try {
            if(result instanceof myPromise){
                result.then(resolve,reject);
            }else{
                resolve(result);
            }
        } catch (error) {
            reject(error);
        }
    }
    
    static resolve(value){
        return new myPromise((resolve,reject)=>{
            if(value instanceof myPromise){
                value.then(resolve,reject);
            }else{
                resolve(value);
            }
        })
    }

    static reject(reason){
        return new myPromise((resolve,reject)=>{
            reject(reason);
        })
    }

    static all(promises){
        let values=[];
        return new myPromise((resolve,reject)=>{
            promises.forEach(promise => {
                promise.then(value=>{
                    values.push(value);
                    if(values.length==promises.length){
                        resolve(values);
                    }
                },reason=>{
                    reject(reason);
                });
            });
        })
    } 

    static race(promises){
        return new Promise((resolve,reject)=>{
            promises.forEach(promise=>{
                promise.then(value=>{
                    resolve(value);
                },reason=>{
                    reject(reason);
                });
            })
        })
    }
}
<think>好的,我现在需要帮助用户理解如何手动实现Promise和async/await,并且提供代码示例和解释。用户已经提供了一些站内引用,里面提到async/await是Generator和Promise的语法糖,以及一些实现步骤。我需要结合这些引用,以及之前的回答,来构造一个详细的解释。 首先,用户之前的问题是关于Promise和async/await的原理,现在他们想进一步手写实现这些功能。我需要先回顾之前的回答,确保一致性。之前用咖啡店的例子解释了Promise和async/await,现在需要深入代码层面。 用户提供的引用提到async/await基于Generator和Promise,并且需要处理自动执行和错误处理。因此,我需要解释Generator函数如何与Promise结合,以及如何自动执行这些生成器。同时,用户需要详细的代码示例,所以必须分步骤展示如何实现一个简单的Promise,然后如何用Generator模拟async/await。 首先,手写Promise。需要实现一个基本的Promise构造函数,处理resolve和reject,维护状态,以及then方法。引用中的信息提到Promise的状态变化,以及then方法如何添加回调。要注意链式调用,每个then返回新的Promise,处理onFulfilled和onRejected。 然后,手动实现async/await。根据引用,这需要Generator和Promise的结合。需要创建一个自动执行生成器的函数,处理yield后的Promise,递归调用next方法,直到完成。错误处理部分需要使用try/catch包裹生成器的next方法,并在Promise的catch中处理异常。 用户可能需要了解为什么Generator可以暂停和恢复执行,这涉及到协程的概念。引用3提到父协程和子协程的切换,执行权交还,这需要解释生成器的执行流程,以及如何通过then方法继续执行。 还需要处理非Promise值的情况,如引用2中提到的,将值转换为Promise.resolve。在手动实现中,需要确保yield后面的值都被包装成Promise,以便统一处理。 代码示例部分需要分块展示,先展示手写Promise的代码,再展示基于Generator的async/await实现。每部分代码需要详细注释,解释关键步骤,如状态管理、回调队列、链式调用等。 可能的问题点包括:Promise的链式调用如何处理,特别是then返回新Promise的情况;Generator执行器中如何递归处理多个yield表达式;错误传播机制,如何在手动实现中捕获并传递错误。 需要确保代码示例简洁,但覆盖关键功能。例如,手写Promise可能不包含所有的特性,如catch方法或静态方法,但核心的then和状态管理必须正确。对于async/await的实现,展示如何用生成器函数和自动执行函数来模拟异步代码的同步写法。 最后,总结两者的关系和实现原理,强调async/await作为语法糖的本质,以及如何依赖Promise和Generator。同时,准备好相关问题,帮助用户进一步理解,例如如何处理多个异步操作、错误处理差异等。</think>### 手写实现 Promise 和 Async/Await 的代码与原理 --- #### **一、手写 Promise 核心实现** Promise核心是**状态管理**和**链式调用**,以下是简化版实现: ```javascript class MyPromise { constructor(executor) { this.state = 'pending'; // 状态:pending/fulfilled/rejected this.value = undefined; // 成功的结果 this.reason = undefined; // 失败的原因 this.onFulfilledCallbacks = []; // 成功回调队列 this.onRejectedCallbacks = []; // 失败回调队列 const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onFulfilledCallbacks.forEach(fn => fn()); // 执行所有成功回调 } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach(fn => fn()); // 执行所有失败回调 } }; try { executor(resolve, reject); // 立即执行传入的函数 } catch (err) { reject(err); } } then(onFulfilled, onRejected) { // 处理链式调用,返回新的 Promise const newPromise = new MyPromise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { // 模拟微任务(简化版) try { const x = onFulfilled(this.value); resolve(x); // 将结果传递给下一个 then } catch (err) { reject(err); } }, 0); } else if (this.state === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); resolve(x); } catch (err) { reject(err); } }, 0); } else { // pending 状态,先存回调 this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { const x = onFulfilled(this.value); resolve(x); } catch (err) { reject(err); } }, 0); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const x = onRejected(this.reason); resolve(x); } catch (err) { reject(err); } }, 0); }); } }); return newPromise; } } ``` **关键原理**: 1. **状态不可逆**:`pending` → `fulfilled` 或 `pending` → `rejected`。 2. **链式调用**:每个 `then` 返回新 Promise,支持连续调用。 3. **异步执行**:用 `setTimeout` 模拟微任务队列(实际中微任务由引擎管理)[^1]。 --- #### **二、手写 Async/Await 核心实现** Async/Await 本质是 **Generator + 自动执行器**,以下是模拟实现: ```javascript // 1. 定义生成器函数(模拟 async 函数) function* asyncFunc() { const result = yield new MyPromise((resolve) => { setTimeout(() => resolve("数据加载完成"), 1000); }); console.log(result); return "done"; } // 2. 自动执行器(模拟 await 的暂停与恢复) function asyncRunner(generator) { const gen = generator(); function handleNext(value) { const { done, value: result } = gen.next(value); if (done) return result; // 将 yield 的值包装为 Promise(兼容非 Promise 值) const promise = result instanceof MyPromise ? result : MyPromise.resolve(result); promise.then((res) => handleNext(res)).catch((err) => gen.throw(err)); } try { handleNext(); } catch (err) { MyPromise.reject(err); } } // 测试代码 asyncRunner(asyncFunc); // 1秒后输出“数据加载完成” ``` **关键原理**: 1. **Generator 暂停与恢复**:通过 `yield` 暂停函数执行,通过 `gen.next()` 恢复执行。 2. **自动执行器**:递归调用 `then` 方法,将异步结果传递回生成器函数[^2]。 3. **错误处理**:用 `catch` 捕获 Promise 错误,并通过 `gen.throw` 抛给生成器。 --- #### **三、实现原理总结** | 组件 | 核心机制 | |---------------|--------------------------------------------------------------------------| | **Promise** | 通过状态机管理异步结果,链式调用传递结果和错误。 | | **Async/Await** | 生成器函数 `yield` 暂停执行,自动执行器递归处理 Promise,模拟同步代码效果[^3]。 | --- #### **四、常见问题解析** 1. **为什么 `async` 函数返回 Promise?** - 自动执行器最终会返回一个 Promise,将生成器的返回值包装为 Promise。 2. **`await` 如何兼容非 Promise 值?** - 执行器会通过 `Promise.resolve()` 将普通值转为 Promise,确保统一处理[^3]。 3. **错误如何在 Async/Await 中传递?** - 自动执行器通过 `catch` 捕获错误,并调用 `gen.throw()` 抛给生成器,最终被 `try/catch` 捕获。 --- #### **五、手写代码测试示例** ```javascript // 测试手写 Promise const p = new MyPromise((resolve) => resolve("成功")); p.then((res) => console.log(res)); // 输出“成功” // 测试手写 Async/Await function* mockAsync() { const data = yield new MyPromise((resolve) => setTimeout(() => resolve("Hello"), 500)); console.log(data); // 0.5秒后输出“Hello” } asyncRunner(mockAsync); ``` --- ### 相关问题 1. 如何实现 Promise 的 `catch` 方法? 2. Generator 函数如何实现异步操作的并行执行? 3. 为什么微任务(如 Promise)比宏任务(如 `setTimeout`)优先级高?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值