Promise自定义封装,Promise的各种方法的封装。
发布人:shili8
发布时间:2025-01-14 19:10
阅读次数:0
**Promise 自定义封装**
=====================在 JavaScript 中,Promise 是一个用于处理异步操作的对象。它允许你写出更简洁、更易读的代码,并且可以方便地处理复杂的异步逻辑。但是,使用 Promise 的时候,我们经常会遇到一些重复的代码和方法,这就需要我们对 Promise 进行自定义封装。
**Promise 封装**
---------------首先,让我们来看一下一个基本的 Promise 封装:
javascriptclass MyPromise { constructor(executor) { this.status = 'pending'; this.value = null; this.reason = null; const resolve = (value) => { if (this.status === 'pending') { this.status = 'fulfilled'; this.value = value; } }; const reject = (reason) => { if (this.status === 'pending') { this.status = 'rejected'; this.reason = reason; } }; executor(resolve, reject); } then(onFulfilled, onRejected) { if (this.status === 'fulfilled') { return Promise.resolve(onFulfilled(this.value)); } else if (this.status === 'rejected') { return Promise.reject(onRejected(this.reason)); } else { return new MyPromise((resolve, reject) => { this.onFulfilled = onFulfilled; this.onRejected = onRejected; const handleValue = () => { try { const result = this.onFulfilled(this.value); resolve(result); } catch (error) { reject(error); } }; const handleError = () => { try { const result = this.onRejected(this.reason); resolve(result); } catch (error) { reject(error); } }; if (this.status === 'fulfilled') { handleValue(); } else if (this.status === 'rejected') { handleError(); } else { // 等待状态改变 } }); } } catch(onRejected) { return this.then(null, onRejected); } finally(onFinally) { return this.then( (value) => Promise.resolve(onFinally()).then(() => value), (reason) => Promise.resolve(onFinally()).catch(() => reason) ); } }
这个自定义封装提供了基本的 `then`、`catch` 和 `finally` 方法。我们可以使用它来创建新的 Promise 对象。
**Promise 的各种方法**
----------------------
### then`then` 方法用于处理成功和失败两种情况下的回调函数。它接受两个参数:`onFulfilled` 和 `onRejected`,分别对应成功和失败的回调函数。
javascriptmyPromise.then(onFulfilled, onRejected);
### catch`catch` 方法用于捕获 Promise 失败时的错误信息。它接受一个参数 `onRejected`,即失败的回调函数。
javascriptmyPromise.catch(onRejected);
### finally`finally` 方法用于在 Promise 无论成功还是失败都会执行的回调函数。它接受一个参数 `onFinally`,即最终的回调函数。
javascriptmyPromise.finally(onFinally);
**示例代码**
-------------
下面是一个使用自定义封装的 Promise 的示例:
javascriptconst myPromise = new MyPromise((resolve, reject) => { setTimeout(() => { resolve('Hello World!'); },1000); }); myPromise.then((value) => { console.log(value); // Hello World! }).catch((error) => { console.error(error); }).finally(() => { console.log('Finally executed'); });
这个示例代码演示了使用自定义封装的 Promise 的基本用法。
**总结**
----------
在本文中,我们对 Promise 进行了自定义封装,提供了一个基本的 `then`、`catch` 和 `finally` 方法。我们可以使用这个自定义封装来创建新的 Promise 对象,并且可以方便地处理复杂的异步逻辑。
希望这篇文章能够帮助你更好地理解和使用 Promise 的各种方法!