1. Toy模板网首页
  2. > Toy博客

【JavaScript】手写Promise

9月前 作者：不叫猫先生 分类：Toy博客 阅读(41) 违法举报

这篇具有很好参考价值的文章主要介绍了【JavaScript】手写Promise。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🐱 个人主页：不叫猫先生
🙋‍♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：vue3从入门到精通、TypeScript从入门到实践
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在工作中摸鱼，摸鱼中进步，期待大佬一起来摸鱼(文末有我wx或者私信)。

面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie

基础回顾

先回顾一下Promise的基本使用方法及特点

  • promise三个状态：进⾏中（pending）、已完成(fulfilled)、已拒绝（rejected）

  • 处理promise异常的三种方式：

    • 通过promise的then的第二个参数
    • 通过.catch处理
    • 通过try…catch处理

  • promise状态处理

    • 处于等待态时，promise 需满⾜以下条件：可以变为「已完成」或「已拒绝」
    • 处于已完成时，promise 需满⾜以下条件：不能迁移⾄其他任何状态；必须拥有⼀个不可变的值
    • 处于已拒绝时，promise 需满⾜以下条件：不能迁移⾄其他任何状态；必须拥有⼀个不可变的原

一、声明Promise类，并进行初始化操作

首先定义一个Promise类，然后进行一些初始化操作。

  • 接收一个回调函数callback，回调函数包含两个参数，一个resolve，一个reject
  • 初始化状态为pending
  • 初始化成功状态的值
  • 初始化失败状态的值
  • 定义resolve函数
  • 定义reject函数
class MyPromise {
  constructor(callback) {
    // 初始化状态为 pending
    this.status = 'pending';
    // 初始化成功状态的值
    this.value = undefined;
    // 初始化失败状态的值
    this.reason = undefined;

    // 定义 resolve 函数
    const resolve = value => {
      if (this.status === 'pending') {
        // 更新状态为 resolved
        this.status = 'resolved';
        // 存储成功状态的值
        this.value = value;
      }
    };

    // 定义 reject 函数
    const reject = reason => {
      if (this.status === 'pending') {
        // 更新状态为 rejected
        this.status = 'rejected';
        // 存储失败状态的值
        this.reason = reason;
      }
    };

    // 调用回调函数，将 resolve 和 reject 传递给它
    callback(resolve, reject);
  }
}

二、then方法

接下来定义Promsie类中then函数。

  • 首先创建一个Promise对象，根据Promise的状态来执行不同的回调函数。then函数接收两个参数，一个onResolved（Promise 的状态为成功时候调用），一个onRejected（Promise 的状态为失败时候调用）。
  • then函数返回一个新的Promsie对象，它的值取决于回调函数的返回值
  • 如果当前状态是pending，需要将onResolved，onRejected回调保存起来，等异步结束之后再执行
class MyPromise {
 then(onResolved, onRejected) {
    // 创建一个新的 Promise 对象
    const newPromise = new MyPromise((resolve, reject) => {
      // 如果当前 Promise 的状态为 resolved
      if (this.status === 'resolved') {
        try {
          // 执行 onResolved 回调函数
          const x = onResolved(this.value);
          // 处理返回值
          resolve(x);
        } catch (error) {
          // 如果回调函数抛出异常，将异常作为失败状态的值
          reject(error);
        }
      }

      // 如果当前 Promise 的状态为 rejected
      if (this.status === 'rejected') {
        try {
          // 执行 onRejected 回调函数
          const x = onRejected(this.reason);
          // 处理返回值
          resolve(x);
        } catch (error) {
          // 如果回调函数抛出异常，将异常作为失败状态的值
          reject(error);
        }
      }

      // 如果当前 Promise 的状态为 pending
      if (this.status === 'pending') {
        // 将 onResolved 和 onRejected 保存起来
        // 等待异步操作完成后再执行
        this.onResolvedCallbacks.push(() => {
          try {
            const x = onResolved(this.value);
            resolve(x);
          } catch (error) {
            reject(error);
                });

    this.onRejectedCallbacks.push(() => {
      try {
        const x = onRejected(this.reason);
        resolve(x);
      } catch (error) {
        reject(error);
      }
    });
  }
});
// 返回新的 Promise 对象
return newPromise;
}

三、catch方法

将 catch 方法转化为 then 方法的一个语法糖，就可以实现啦。到这里我们基本已经实现了一个Promise

class MyPromise {
  catch(onRejected) {
    return this.then(null, onRejected);
  }
}

四、基础完整版代码

class MyPromise {
  constructor(callback) {
    // 初始化状态为 pending
    this.status = 'pending';
    // 初始化成功状态的值
    this.value = undefined;
    // 初始化失败状态的值
    this.reason = undefined;
    // 存储成功状态的回调函数
    this.onResolvedCallbacks = [];
    // 存储失败状态的回调函数
    this.onRejectedCallbacks = [];

    // 定义 resolve 函数
    const resolve = value => {
      if (this.status === 'pending') {
        // 更新状态为 resolved
        this.status = 'resolved';
        // 存储成功状态的值
        this.value = value;
        // 执行所有成功状态的回调函数
        this.onResolvedCallbacks.forEach(cb => cb());
      }
    };

    // 定义 reject 函数
    const reject = reason => {
      if (this.status === 'pending') {
        // 更新状态为 rejected
        this.status = 'rejected';
        // 存储失败状态的值
        this.reason = reason;
        // 执行所有失败状态的回调函数
        this.onRejectedCallbacks.forEach(cb => cb());
      }
    };

    // 调用回调函数，将 resolve 和 reject 传递给它
    callback(resolve, reject);
  }

    // 创建一个新的 Promise 对象
    const promise2 = new MyPromise((resolve, reject) => {
      // 如果当前 Promise 的状态为 resolved
      if (this.status === 'resolved') {
        try {
          // 执行 onResolved 回调函数
          const x = onResolved(this.value);
          // 处理返回值
          resolve(x);
        } catch
      (error) {
        // 如果回调函数抛出异常，则将异常作为新 Promise 的失败状态的值
        reject(error);
      }
    });
  }

  // 如果当前 Promise 的状态为 rejected
  if (this.status === 'rejected') {
    try {
      // 执行 onRejected 回调函数
      const x = onRejected(this.reason);
      // 处理返回值
      resolve(x);
    } catch (error) {
      // 如果回调函数抛出异常，则将异常作为新 Promise 的失败状态的值
      reject(error);
    }
  }

  // 如果当前 Promise 的状态为 pending
  if (this.status === 'pending') {
    // 将 onResolved 和 onRejected 回调函数保存起来，等待异步操作完成后再执行
    this.onResolvedCallbacks.push(() => {
      try {
        const x = onResolved(this.value);
        resolve(x);
      } catch (error) {
        reject(error);
      }
    });

    this.onRejectedCallbacks.push(() => {
      try {
        const x = onRejected(this.reason);
        resolve(x);
      } catch (error) {
        reject(error);
      }
    });
  }
});

  // 返回新的 Promise 对象
  return promise2;
}
catch(onRejected) {
   return this.then(null, onRejected);
   }
}

五、案例测试

生成一个myPromsie对象，然后用then方法进行链式调用。

		const promise = new MyPromise((resolve, reject) => {
			setTimeout(() => {
				console.log('1')
				resolve('成功')
			}, 1000)
		})
		promise.then(value => {
			console.log('2')
			return "第一次"
		}).then(value => {
			console.log('3')
			return new MyPromise((resolve, reject) => {
				setTimeout(() => {
					resolve('第二次处理结果');
				}, 1000);
			});
		}).then(value => {
			console.log(value);
			throw new Error('抛出异常');
		}).catch(error => {
			console.log(error);
		});

【JavaScript】手写Promise

六、问题

1. 为什么then函数中需要考虑Promise状态为pending的情况？

当 then 方法被调用时，我们首先需要判断原始 Promise 对象的状态。

  • 如果原始 Promise 对象的状态为 fulfilled，那么我们就可以直接执行成功回调函数，并将成功状态的值作为参数传递给它。
  • 如果原始 Promise 对象的状态为 rejected，那么我们就可以直接执行失败回调函数，并将失败原因作为参数传递给它。
  • 但是，如果原始 Promise 对象的状态为 pending，那么我们就需要等待原始 Promise 对象的状态发生变化，再执行相应的操作。

2. 当then函数传的参数不是函数怎么办？

为了避免then函数传的参数不是函数，需要对上面代码稍微优化一下

  then(onResolved, onRejected) {
      	onResolved = typeof onResolved === "function" ? onResolved : (value) => value;
		onRejected = typeof onRejected === "function" ? onRejected : (reason) => { throw reason };
		//其他逻辑
  }

3. onResolvedCallbacks 和 onRejectedCallbacks 什么时候清空？

在调用then函数中，当Promise的状态为pending时候，会把onResolved和onRejected回调放到各自回调函数队列中，等状态改变（即在执行resolve函数/reject函数）时候，将 onResolvedCallbacks ，this.onRejectedCallbacks 循环调用。当Promise状态pending时候，就将 onResolvedCallbacks 和 onRejectedCallbacks 置空。所以优化上面代码如下：文章来源地址https://www.toymoban.com/news/detail-453455.html

then(onResolved,onRejected){
       if (this.status == "pending") {
						this.onResolvedCallbacks.push(() => {
							if (this.status == "resolved") {
								try {
									const x = onResolved(this.value)
									resolve(x)
								} catch (error) {
									reject(error)
								}
							}
						})
						this.onRejectedCallbacks.push(() => {
							if (this.status == "rejected") {
								try {
									const x = onRejected(this.reason)
									resolve(x)
								} catch (error) {
									reject(error)
								}
							}
						})
					} else {
						// 执行完所有回调函数之后，清空回调数组
						this.onResolvedCallbacks = [];
						this.onRejectedCallbacks = [];
					}
}

七、优化后完整代码

	<script>

		class MyPromise {
			constructor(callback) {
				this.status = "pending";
				this.value = "";
				this.reason = "";
				// 存储成功状态的回调函数
				this.onResolvedCallbacks = [];
				// 存储失败状态的回调函数
				this.onRejectedCallbacks = [];
				const resolve = (value) => {
					if (this.status == "pending") {
						this.status = "resolved"
						this.value = value;
						this.onResolvedCallbacks.forEach((fn) => fn());
					}
				}
				const reject = (reason) => {
					if (this.status == "pending") {
						this.status = "rejected"
						this.reason = reason;
						this.onRejectedCallbacks.forEach((fn) => fn());
					}
				}
				try {
					callback(resolve, reject);
				} catch (error) {
					reject(error);
				}

			}

			then(onResolved, onRejected) {
				onResolved = typeof onResolved === "function" ? onResolved : (value) => value;
				onRejected = typeof onRejected === "function" ? onRejected : (reason) => { throw reason };
				const promise2 = new MyPromise((resolve, reject) => {
					if (this.status == "resolved") {
						console.log('1111111111')
						try {
							const x = onResolved(this.value)
							resolve(x)
						} catch (error) {
							reject(error)
						}
					}
					if (this.status == "rejected") {
						console.log('2222222')
						try {
							const x = onRejected(this.reason)
							resolve(x)
						} catch (error) {
							reject(error)
						}
					}
					if (this.status == "pending") {
						console.log('333333333333')
						this.onResolvedCallbacks.push(() => {
							if (this.status == "resolved") {
								try {
									const x = onResolved(this.value)
									resolve(x)
								} catch (error) {
									reject(error)
								}
							}
						})
						this.onRejectedCallbacks.push(() => {
							if (this.status == "rejected") {
								try {
									const x = onRejected(this.reason)
									resolve(x)
								} catch (error) {
									reject(error)
								}
							}
						})
					} else {
						// 执行完所有回调函数之后，清空回调数组
						this.onResolvedCallbacks = [];
						this.onRejectedCallbacks = [];
					}
				})
				return promise2
			}
			catch(onRejected) {
				return this.then(null, onRejected)
			}
		}

		const promise = new MyPromise((resolve, reject) => {
			// setTimeout(() => {
			// 	console.log('1')
				resolve('成功')
			// }, 1000)
		})
		promise.then(1).
		then(value => {
			// console.log('2')
			// return "第一次"
			// setTimeout(() => {
				console.log('1')
					// return "第一次"
			// },1000)
		}).then(value => {
			console.log('3')
			return new MyPromise((resolve, reject) => {
				setTimeout(() => {
					resolve('第二次处理结果');
				}, 1000);
			});
		}).then(value => {
			console.log(value);
			throw new Error('抛出异常');
		}).catch(error => {
			console.log(error);
		});
	</script>

附

1. 处理promsie异常的三种方式

```javascript
function promise3() {
 return new Promise(function(resolve, reject) {
 var random = Math.random() * 10; // 随机⼀个 1 - 10 的数字
 setTimeout(function() {
      if (random >= 5) {
          resolve(random);
      } else {
          reject(random);
      } 
    }, 1000);
 });
}
var onResolve = function(val) {
 console.log('已完成：输出的数字是', val);
};
var onReject = function(val) {
 console.log('已拒绝：输出的数字是', val);
}
// promise 的 then 接收两个函数，第⼀个参数为 resolve 后执⾏，第⼆个函数为 reject 后执⾏
promise().then(onResolve, onReject);
// 也可以通过 .catch ⽅法拦截状态变为已拒绝时的 promise
promise().catch(onReject).then(onResolve);
// 也可以通过 try catch 进⾏拦截状态变为已拒绝的 promise
try {
 promise().then(onResolve);
} catch (e) {
 onReject(e);
}

到了这里，关于【JavaScript】手写Promise的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • JavaScript 之 promise

    JavaScript 之 promise

    封装和调用不是同一个人，不清楚如何调用 设计者不好设计，调用者调用很麻烦 从一个实际的例子来作为切入点： 调用一个函数，这个函数中发送网络请求（可以用定时器来模拟） 如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去 如果发送网

    2024年01月21日
    浏览(44)

  • JavaScript Promise

    JavaScript Promise 是一种用于处理异步操作的对象。它表示一个异步操作的最终完成或失败，并且可以处理操作的结果或错误。 Promise 对象有三种状态： 1. Pending（进行中）：初始状态，表示操作正在进行中，既不是成功也不是失败。 2. Fulfilled（已完成）：表示操作成功完成，并

    2024年02月06日
    浏览(38)

  • [JavaScript理论学习] 什么是Promise (含如何判断一个值是Promise)

    本文旨在对 Promise 的规范进行解释, 便于读者在学习 Promise 的过程中梳理 Promise 之间的操作关系, 不对具体的代码实现和Promise用法进行解释. 比如, 为什么 [MDN-await] 中要提及一个 thenable 对象, 而且这个 thenable 对象 还可以和 Promise 实例 一样使用 await 等待处理, 这就涉及到了下面

    2024年02月09日
    浏览(42)

  • JavaScript如何解决返回[object Promise]

    当使用JavaScript中的Promise时，当您尝试访问Promise的值时，您可能会看到返回值为 [object Promise] 的情况。这是因为Promise是一种异步操作，它不能立即返回结果，而是需要等待操作完成后返回结果。 要访问Promise的值，您需要使用Promise的then()方法，该方法接受一个回调函数作为参

    2024年02月12日
    浏览(37)

  • [javascript核心-04]彻底弄懂Promise异步编程

    本文github地址:JavaScript_Interview_Everything 大前端知识体系与面试宝典，从前端到后端，全栈工程师，成为六边形战士 1.1. 快速上手 01快手上手.js 02.若传入的是另一个promise对象，则状态由传入的promise对象决定 03.若传入了一个实现了 then 方法的对象，则执行该then方法且由此方法

    2024年02月08日
    浏览(40)

  • JavaScript 异步解决方案 Promise 全解析（转载）

    Promise 是一个 JS 的异步编程解决方案，解决了传统异步编程回调地狱的问题。 从语义上来说： Promise 是一个向外部传达异步编程操作消息的对象。 JS里一个promise可以有以下几种基本状态： nothing happened yet \\\"locked in\\\" to another promise fulfilled rejected 其中{1,2}为 pending ，{3,4}为 settl

    2024年02月08日
    浏览(59)
  • 深入学习JavaScript系列（七）——Promise async/await generator

    深入学习JavaScript系列（七）——Promise async/await generator

    本篇属于本系列第七篇 第一篇：#深入学习JavaScript系列（一）—— ES6中的JS执行上下文 第二篇：# 深入学习JavaScript系列（二）——作用域和作用域链 第三篇：# 深入学习JavaScript系列（三）——this 第四篇：# 深入学习JavaScript系列（四）——JS闭包 第五篇：# 深入学习JavaScrip

    2023年04月08日
    浏览(47)
  • 【前端异常】JavaScript错误处理：分析 Uncaught(in promise) error

    【前端异常】JavaScript错误处理：分析 Uncaught(in promise) error

    在开发过程中，JavaScript的错误处理是一个老生常谈的话题。当应用程序发生未捕获的异常时，Uncaught(in promise) error是其中最常见的错误类型。这篇文章将从多个方面详细阐述这种错误类型的原因与解决方案。 Promise是一种用于异步编程的原生JavaScript对象。它提供了一种处理异

    2024年02月05日
    浏览(76)

  • JavaScript 手写代码 第四期

    我们在日常开发过程中，往往都是取出来直接用，从来不思考代码的底层实现逻辑，但当我开始研究一些底层的东西的时候，才开始理解了JavaScript每个方法和函数的底层实现思路，我认为这可以很好的提高我们的代码水平和逻辑思维。 简单来说，就是将多维数组转换为一维

    2024年02月10日
    浏览(57)
  • JavaScript 手写代码 第一期

    JavaScript 手写代码 第一期

    我们在日常开发过程中，往往都是取出来直接用，从来不思考代码的底层实现逻辑，但当我开始研究一些底层的东西的时候，才开始理解了JavaScript每个方法和函数的底层实现思路，我认为这可以很好的提高我们的代码水平和逻辑思维。 2.1.1 基本使用 定义 : 静态方法以一个现

    2024年02月10日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包