什么是 Promise
Promise 是一种异步编程的解决方案，它可以在异步操作成功或失败之后，分别执行相应的回调函数。Promise 使得异步操作更加优雅、简洁，并且防止了回调地狱的发生。
在 ES6 中，Promise 是一个构造函数，用来生成 Promise 实例。它最大的特点就是解决了回调地狱的问题，让我们的异步代码更加易读、易维护。
Promise 的原理
Promise 最关键的功能就是处理异步操作的状态。一个 Promise 有 3 种状态：
- Pending（等待）：初始状态，既不是成功，也不是失败状态。
- Fulfilled（成功）：指异步操作成功完成，此时会执行
.then()方法指定的回调函数，并将异步操作的结果作为参数传递给回调函数。 - Rejected（失败）：指异步操作失败，此时会执行
.catch()方法指定的回调函数，或是.then()方法的第二个参数指定的回调函数，同时将异步操作抛出的错误作为参数传递给回调函数。
当 Promise 的状态从 Pending 变成 Fulfilled（或 Rejected）后，Promise 的状态就不会再改变。
Promise 的实现方法
我们可以使用 JavaScript 来手写一个简单的 Promise，执行以下步骤：
定义 Promise 构造函数
-- -------------------- ---- ------- -------- ------------- - -- ----- ---- ------- ------- -- --- ---- - ----- ---------- - ----- -- ------------ ----- ---------- - ----- -- ------------ ----- ---------------- - --- -- --------------------- --------------- - --- -- -------------------- -- ------ -------- -------------- - -- ------------ -- -------- ------------- -- ------------ --- ---------- - ------- - -- ------- --------- ----------- - ------------ -- ------------- ----- ---------- - ------ -- -- ----------------------- ------------------------------------------- - --------------------- --- - -------- ------------- - -- ------------ -- -------- ------------- -- ------------ --- ---------- - ------- - -- ------- -------- ----------- - ----------- -- ------------- ----- ---------- - ------ -- -- ---------------------- ------------------------------------------ - --------------------- --- - -- ------ ----------- -------- -展开代码
实现 Promise.then() 方法
-- -------------------- ---- ------- ------------------------ - --------------------- ----------- - -- -- ----------- ------------------- ----- -- ----------- - ------ ----------- --- ---------- - ----------- - --------------- - ------ ------ -- -- -- ---------- ------------------- ----- -- ---------- - ------ ---------- --- ---------- - ---------- - --------------- - ----- ------ -- --- ---- - ----- --- -------- -- ------------ --- ---------- - -- ------ ------------------- ------- - --- --------------------------- ------- - ------------------------------------- - --- - --- - - ------------------- -- - - ------ ------- --- ------- -- ----------- - ----- ----- - -- --------------------- ------- --- ------ -- ----------- - --- ------------------------------------ - --- - --- - - ------------------ -- - - ------ ------- --- ------- -- ----------- - ----- ----- - -- --------------------- ------- --- ------ -- ----------- - --- --- - ---- -- ------------ --- ------------ - -- ----- -------------- ----------- -- ------- - --- --------------------------- ------- - --- - --- - - ------------------------ -- - - ------ ------- --- ------- -- ----------- - ----- ----- - -- --------------------- ------- --- ------ -- ----------- - --- - ---- -- ------------ --- ----------- - -- ----- ------------- ---------- -- ------- - --- --------------------------- ------- - --- - --- - - ----------------------- -- - - ------ ------- --- ------- -- ----------- - ----- ----- - -- --------------------- ------- --- ------ -- ----------- - --- - ------ -------- --展开代码
实现 Promise.catch() 方法
MyPromise.prototype.catch = function(onRejected) { return this.then(null, onRejected); };
Promise 的示例代码
下面这个例子可以帮助你更好地理解 Promise 的实现方法：
-- -------------------- ---- ------- -------- ------------ - ------ --- --------------------------- ------- - --- --- - --- -------- ---------- - ---------- - ------------- -- ----------- - ---------- - ---------- ------------ --- ---- ----- -- - - ------ -- ------- - ---- --- - ---------------------------------------- ------------------- - ------------------ ------- -- ------------- ------------------------------- -- ---------------------- - -------------------- ------- ------- ----- -------- - - --------------- ---展开代码
输出结果为：
Image loading is completed. <img src="https://example.com/image.jpg"></img>
以上代码实现了使用 Promise 的方式加载图片，并在加载完成后将其添加到页面中。如果加载过程中出现错误，则输出错误信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b9afe5306f20b3a6822f97
