网站设计公司杭州,asp.net网站搬迁到移动终端,外国人做的学汉字网站,对接 网站后台笔记分享
在现代JavaScript开发中#xff0c;异步编程是不可避免的一部分。为了更好地处理异步操作#xff0c;ES6引入了Promise。Promise使得异步代码更具可读性和可维护性。通过手写一个完整的Promise实现#xff0c;可以帮助你更深入地理解其工作原理。本文将详细介绍Pr…笔记分享
在现代JavaScript开发中异步编程是不可避免的一部分。为了更好地处理异步操作ES6引入了Promise。Promise使得异步代码更具可读性和可维护性。通过手写一个完整的Promise实现可以帮助你更深入地理解其工作原理。本文将详细介绍Promise的概念、用法及其在实际开发中的应用并提供一个手写的Promise实现。
什么是Promise
Promise是JavaScript中的一种对象用于表示一个异步操作的最终完成或失败及其结果值。它有三种状态
Pending待定初始状态既没有被兑现也没有被拒绝。Fulfilled已兑现操作成功完成并返回一个值。Rejected已拒绝操作失败并返回一个原因。
手写Promise实现
我们将通过构建一个简化版的Promise实现来更好地理解其工作原理。
class MyPromise {constructor(executor) {this.state pending; // 初始状态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 (error) {reject(error);}}then(onFulfilled, onRejected) {onFulfilled typeof onFulfilled function ? onFulfilled : value value;onRejected typeof onRejected function ? onRejected : reason { throw reason };let promise2 new MyPromise((resolve, reject) {if (this.state fulfilled) {setTimeout(() {try {let x onFulfilled(this.value);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);}if (this.state rejected) {setTimeout(() {try {let x onRejected(this.reason);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);}if (this.state pending) {this.onFulfilledCallbacks.push(() {setTimeout(() {try {let x onFulfilled(this.value);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);});this.onRejectedCallbacks.push(() {setTimeout(() {try {let x onRejected(this.reason);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);});}});return promise2;}catch(onRejected) {return this.then(null, onRejected);}static resolve(value) {return new MyPromise((resolve, reject) {resolve(value);});}static reject(reason) {return new MyPromise((resolve, reject) {reject(reason);});}static all(promises) {return new MyPromise((resolve, reject) {let results [];let completed 0;const processResult (index, value) {results[index] value;if (completed promises.length) {resolve(results);}};promises.forEach((promise, index) {MyPromise.resolve(promise).then(value {processResult(index, value);}, reject);});});}static race(promises) {return new MyPromise((resolve, reject) {promises.forEach(promise {MyPromise.resolve(promise).then(resolve, reject);});});}
}function resolvePromise(promise2, x, resolve, reject) {if (promise2 x) {return reject(new TypeError(Chaining cycle detected for promise));}let called false;if (x (typeof x object || typeof x function)) {try {let then x.then;if (typeof then function) {then.call(x, y {if (called) return;called true;resolvePromise(promise2, y, resolve, reject);}, reason {if (called) return;called true;reject(reason);});} else {resolve(x);}} catch (error) {if (called) return;called true;reject(error);}} else {resolve(x);}
}关键点解释
状态管理Promise有三种状态pending、fulfilled和rejected。通过state变量来管理当前Promise的状态。回调队列使用两个数组onFulfilledCallbacks和onRejectedCallbacks来存储在pending状态时注册的回调函数。resolve和rejectresolve函数将Promise状态从pending变为fulfilled并执行所有成功回调reject函数将Promise状态从pending变为rejected并执行所有失败回调。then方法then方法返回一个新的Promise并根据当前Promise的状态决定如何处理回调函数。resolvePromise函数这个函数用来处理then方法中的链式调用确保Promise的规范执行防止循环引用等问题。
用法示例
const p1 new MyPromise((resolve, reject) {setTimeout(() {resolve(成功);}, 1000);
});p1.then(value {console.log(value); // 输出 成功return new MyPromise((resolve, reject) {setTimeout(() {resolve(链式调用成功);}, 1000);});
}).then(value {console.log(value); // 输出 链式调用成功
}).catch(error {console.error(error);
});通过这个手写的Promise实现你可以更好地理解Promise的内部工作机制并在实际开发中灵活运用Promise来处理异步操作。希望这篇博客能帮助你深入理解JavaScript中的Promise。
