Promise 重写 (第一部分)

学习关键语句:
promise 重写

写在前面

重新学习了怎么重写 promise , 我觉得最重要的就是要有思路,不然有些 A+ 规范是完全想不到的

开始

重写函数的过程中, 最重要的是有思路
我们从哪里获取重写思路? 从正常的代码中
我们先看正常的代码

const p1 = new Promise((resolve, reject) => {resolve();console.log("1");
}).then(() => {console.log("2");
});

我们的思路就来了:

  1. promise 是一个类
  2. 初始化的时候传入的是一个函数, 函数里面有两个参数, resolve, reject
  3. 这说明类的构造器中有这两个函数声明
  4. 实例化后的每一个 promise 都有自己的状态, 说明有实例属性 state

想到这里马上开始重写, 完成以上 1\2\3\4 点

// 1. promise 是一个类
class MyPromise {constructor(executor) {// 4. 实例化后的每一个 promise 都有自己的状态, 说明有实例属性 statethis.state = "pending";// 3. 这说明类的构造器中有这两个函数声明let resolve = () => {};let reject = () => {};// 2. 初始化的时候传入的是一个函数, 函数里面有两个参数, resolve, rejectexecutor(resolve, reject);}
}
let p = new MyPromise((resolve, reject) => {});

接下来我们知道 resolve 和 reject 函数中有参数 value 和 reason
所以我们马上就又有思路了:

  1. 执行器函数中调用 resolve 会传入参数, reject 同样也是
  2. 需要一个 then 方法来链式调用, 所以 then 方法是一个原型方法
  3. then 方法中有两个参数, 一个成功回调一个失败回调

完成以上 5\6\7 点

class MyPromise {constructor(executor) {this.state = "pending";// 5. 执行器函数中调用 resolve 会传入参数, reject 同样也是let resolve = (value) => {};let reject = (reason) => {};executor(resolve, reject);}// 6. 需要一个 then 方法来链式调用, 所以 then 方法是一个原型方法// 7. then 方法中有两个参数, 一个成功回调一个失败回调then(onFulfilled, onRejected) {}
}
let p = new MyPromise((resolve, reject) => {});

我们知道只有在构造器函数中调用了 resolve 或者 reject 方法后才会进入 then 方法, 同时我们也知道一旦调用 resolve 或者 reject 方法就会改变 promise 实例的状态, 所以我们接下来的思路就是:

  1. 调用 resolve 或者 reject 方法后改变状态
  2. 成功或者失败回调需要拿到对应的 resolve 和 reject 函数中的参数, 这需要我们在实例上新增相应的属性存储
  3. 在 resolve 和 reject 方法中要赋值给实例属性
  4. 在 then 方法中判断状态调用方法

完成以上 8\9\10\11 点

class MyPromise {constructor(executor) {this.state = "pending";// 9. 成功或者失败回调需要拿到对应的 resolve 和 reject 函数中的参数, 这需要我们在实例上新增相应的属性存储this.value = undefined;this.reason = undefined;let resolve = (value) => {// 8. 调用 resolve 或者 reject 方法后改变状态this.state = "fulfilled";// 10. 在 resolve 和 reject 方法中要赋值给实例属性this.value = value;};let reject = (reason) => {// 8. 调用 resolve 或者 reject 方法后改变状态this.state = "rejected";// 10. 在 resolve 和 reject 方法中要赋值给实例属性this.reason = reason;};executor(resolve, reject);}then(onFulfilled, onRejected) {// 11. 在 then 方法中判断状态调用方法if (this.state === "fulfilled") {onFulfilled(this.value);}if (this.state === "rejected") {onRejected(this.reason);}}
}
let p = new MyPromise((resolve, reject) => {});

好完成到这里的时候, 不涉及异步的操作我们已经完成了, 现在我们尝试使用一下我们重写的 promise

const p1 = new MyPromise2((resolve, reject) => {resolve(2);console.log("1");
}).then((value) => {console.log(value);
});

在这里插入图片描述

接下来考虑异步的问题, 即如果执行器函数中存在异步的话, 进入 then 方法时状态其实还是 pending , 所以需要考虑当进入 then 方法时状态为 pending 就是异步, 我们要将异步时候的回调函数保存起来当真正执行的时候再调用 , 由于同一个 promise 可以多次调用 then 方法 , 所以需要用一个数组来保存所有可能的回调函数 , 我们从这出发 , 给出以下思路:

  1. 在实例上添加属性来保存成功回调和失败回调
  2. 在 then 方法中遇到 pending 状态就是有异步情况 , 真正的执行回调将不在这里发生 , 存到实例的属性上

完成以上 12\13 点

class MyPromise {constructor(executor) {this.state = "pending";this.value = undefined;this.reason = undefined;// 12. 在实例上添加属性来保存成功回调和失败回调this.onFulfilledCallbacks = [];this.onRejectedCallbacks = [];let resolve = (value) => {this.state = "fulfilled";this.value = value;};let reject = (reason) => {this.state = "rejected";this.reason = reason;};executor(resolve, reject);}then(onFulfilled, onRejected) {if (this.state === "fulfilled") {onFulfilled(this.value);}if (this.state === "rejected") {onRejected(this.reason);}// 13. 在 then 方法中遇到 pending 状态就是有异步情况, 真正的执行回调将不在这里发生, 存到实例的属性上if (this.state === "pending") {this.onFulfilledCallbacks.push(() => {onFulfilled(this.value);});this.onRejectedCallbacks.push(() => {onRejected(this.reason);});}}
}
let p = new MyPromise((resolve, reject) => {});

那么真正的回调函数执行到底在哪里呢? 我们来看一下一个出现了异步的情况代码, 看以下代码:

由于构造器函数中出现一个定时器, 所以会在 1 秒后才打印出 2

const p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve(2);}, 1000);console.log("1");
}).then((value) => {console.log(value);
});

上面这个代码中能执行回调函数的地方只有在 resolve 函数中了, 所以我们就又有思路了:

  1. 在 resolve 和 reject 方法中执行回调函数

完成以上 14 点

class MyPromise {constructor(executor) {this.state = "pending";this.value = undefined;this.reason = undefined;this.onFulfilledCallbacks = [];this.onRejectedCallbacks = [];let resolve = (value) => {this.state = "fulfilled";this.value = value;// 14. 在 resolve 和 reject 方法中执行回调函数this.onFulfilledCallbacks.forEach((fn) => fn());};let reject = (reason) => {this.state = "rejected";this.reason = reason;// 14. 在 resolve 和 reject 方法中执行回调函数this.onRejectedCallbacks.forEach((fn) => fn());};executor(resolve, reject);}then(onFulfilled, onRejected) {if (this.state === "fulfilled") {onFulfilled(this.value);}if (this.state === "rejected") {onRejected(this.reason);}if (this.state === "pending") {this.onFulfilledCallbacks.push(() => {onFulfilled(this.value);});this.onRejectedCallbacks.push(() => {onRejected(this.reason);});}}
}
let p = new MyPromise((resolve, reject) => {});

我们知道 promise 实例是可以链式调用的, 这意味每一个方法的最后都会返回一个新的 promise 来提供给下一次调用 promise 原型方法, 所以我们就考虑到在 then 方法中直接返回一个新的 promise 对象, 同时, 由于执行器函数执行是同步代码, 所以我们可以直接将 then 中的代码放入到新的 promise 中, 但是我们知道链式调用 then 方法时我们可以拿到上一次 then 返回的值, 所以在成功回调返回的值, 我们将再次使用新的 promise 中的 resolve 方法去调用, 以下就是这次的思路:

  1. 在 then 方法中新声明一个 promise 对象并返回, 将 then 方法中代码放入执行器函数中
  2. 将第一次 then 的回调的结果赋值给一个变量, 使用新声明的 promise 来调用 resolve 和 reject 方法

完成以上 15\16 点

class MyPromise {constructor(executor) {this.state = "pending";this.value = undefined;this.reason = undefined;this.onFulfilledCallbacks = [];this.onRejectedCallbacks = [];let resolve = (value) => {this.state = "fulfilled";this.value = value;this.onFulfilledCallbacks.forEach((fn) => fn());};let reject = (reason) => {this.state = "rejected";this.reason = reason;this.onRejectedCallbacks.forEach((fn) => fn());};executor(resolve, reject);}then(onFulfilled, onRejected) {// 15. 在 then 方法中新声明一个 promise 对象并返回, 将 then 方法中代码放入执行器函数中const p2 = new MyPromise((resolve, reject) => {let x;if (this.state === "fulfilled") {// 16. 将第一次 then 的回调的结果赋值给一个变量, 使用新声明的 promise 来调用 resolve 方法x = onFulfilled(this.value);resolve(x);}if (this.state === "rejected") {// 16. 将第一次 then 的回调的结果赋值给一个变量, 使用新声明的 promise 来调用 resolve 方法x = onRejected(this.reason);reject(x);}if (this.state === "pending") {this.onFulfilledCallbacks.push(() => {// 16. 将第一次 then 的回调的结果赋值给一个变量, 使用新声明的 promise 来调用 resolve 方法x = onFulfilled(this.value);resolve(x);});this.onRejectedCallbacks.push(() => {// 16. 将第一次 then 的回调的结果赋值给一个变量, 使用新声明的 promise 来调用 resolve 方法x = onRejected(this.reason);reject(x);});}});return p2;}
}
let p = new MyPromise((resolve, reject) => {});

好的这样就已经完成了链式调用的问题了, 但是现在又有一个新的问题了, 那就是如果第一次的回调函数返回的是一个 promise 对象呢? 那就需要对 x 进行判断和处理, 我们思路如下:

  1. 声明一个 resolvePromise 专门处理判断 x 的问题, 根据 promise A+ 规范, 返回的 promise 不能与新增的 promise 相同, 在 resolvePromise 方法中需要传入 p2 进行判断
  2. 由于 p2 此时没有初始化完毕所以无法调用, 使用定时器包裹延后执行
  3. 由于 resolvePromise 中可能会抛出错误, 所以使用 try.catch 包裹
  4. 同样的, 在构造器中, 对执行器函数使用 try.catch 包裹

完成以上 17\18\19\20 点

class MyPromise {constructor(executor) {this.state = "pending";this.value = undefined;this.reason = undefined;this.onFulfilledCallbacks = [];this.onRejectedCallbacks = [];let resolve = (value) => {this.state = "fulfilled";this.value = value;this.onFulfilledCallbacks.forEach((fn) => fn());};let reject = (reason) => {this.state = "rejected";this.reason = reason;this.onRejectedCallbacks.forEach((fn) => fn());};// 20. 同样的, 在构造器中, 对执行器函数使用 try.catch 包裹try {executor(resolve, reject);} catch (err) {reject(err);}}then(onFulfilled, onRejected) {const p2 = new MyPromise((resolve, reject) => {let x;if (this.state === "fulfilled") {// 18. 由于 p2 此时没有初始化完毕所以无法调用, 使用定时器包裹延后执行setTimeout(() => {// 19. 由于 resolvePromise 中可能会抛出错误, 所以使用 try.catch 包裹try {x = onFulfilled(this.value);// 17. 声明一个 resolvePromise 专门处理判断 x 的问题, 根据 promise A+ 规范, 返回的 promise 不能与新增的 promise 相同, 在 resolvePromise 方法中需要传入 p2 进行判断resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);}if (this.state === "rejected") {// 18. 由于 p2 此时没有初始化完毕所以无法调用, 使用定时器包裹延后执行setTimeout(() => {// 19. 由于 resolvePromise 中可能会抛出错误, 所以使用 try.catch 包裹try {x = onRejected(this.reason);// 17. 声明一个 resolvePromise 专门处理判断 x 的问题, 根据 promise A+ 规范, 返回的 promise 不能与新增的 promise 相同, 在 resolvePromise 方法中需要传入 p2 进行判断resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);}if (this.state === "pending") {this.onFulfilledCallbacks.push(() => {// 18. 由于 p2 此时没有初始化完毕所以无法调用, 使用定时器包裹延后执行setTimeout(() => {// 19. 由于 resolvePromise 中可能会抛出错误, 所以使用 try.catch 包裹try {x = onFulfilled(this.value);// 17. 声明一个 resolvePromise 专门处理判断 x 的问题, 根据 promise A+ 规范, 返回的 promise 不能与新增的 promise 相同, 在 resolvePromise 方法中需要传入 p2 进行判断resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);});this.onRejectedCallbacks.push(() => {// 18. 由于 p2 此时没有初始化完毕所以无法调用, 使用定时器包裹延后执行setTimeout(() => {// 19. 由于 resolvePromise 中可能会抛出错误, 所以使用 try.catch 包裹try {x = onRejected(this.reason);// 17. 声明一个 resolvePromise 专门处理判断 x 的问题, 根据 promise A+ 规范, 返回的 promise 不能与新增的 promise 相同, 在 resolvePromise 方法中需要传入 p2 进行判断resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);});}});return p2;}
}
// 17. 声明一个 resolvePromise 专门处理判断 x 的问题, 根据 promise A+ 规范, 返回的 promise 不能与新增的 promise 相同, 在 resolvePromise 方法中需要传入 p2 进行判断
function resolvePromise(p2, x, resolve, reject) {if (p2 === x) {return reject(new Error("Error: p2 is x"));}
}
let p = new MyPromise((resolve, reject) => {});

接下来我们要继续完善 resolvePromise 中的逻辑, 我们需要判断 x 到底是不是 promise 对象, 我们使用是否是带 then 属性的对象来判断, 是就是, 不是就不是, 当是 promise 对象后, 直接调用 x 的 then 方法, 在成功回调和失败回调中分别调用 resolvePromise 传入的 resolve 和 reject

  1. x 需要是个对象或者函数
  2. x 为普通数据类型就直接 resolve
  3. 获取 x 的 then 属性, 是函数才是 promise 对象
  4. 获取 x.then 可能会报错, 使用 try.catch 包裹

完成以上 21\22\23\24 点

class MyPromise {constructor(executor) {this.state = "pending";this.value = undefined;this.reason = undefined;this.onFulfilledCallbacks = [];this.onRejectedCallbacks = [];let resolve = (value) => {this.state = "fulfilled";this.value = value;this.onFulfilledCallbacks.forEach((fn) => fn());};let reject = (reason) => {this.state = "rejected";this.reason = reason;this.onRejectedCallbacks.forEach((fn) => fn());};try {executor(resolve, reject);} catch (err) {reject(err);}}then(onFulfilled, onRejected) {const p2 = new MyPromise((resolve, reject) => {let x;if (this.state === "fulfilled") {setTimeout(() => {try {x = onFulfilled(this.value);resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);}if (this.state === "rejected") {setTimeout(() => {try {x = onRejected(this.reason);resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);}if (this.state === "pending") {this.onFulfilledCallbacks.push(() => {setTimeout(() => {try {x = onFulfilled(this.value);resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);});this.onRejectedCallbacks.push(() => {setTimeout(() => {try {x = onRejected(this.reason);resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);});}});return p2;}
}
function resolvePromise(p2, x, resolve, reject) {if (p2 === x) {return reject(new Error("Error: p2 is x"));}// 21. x 需要是个对象或者函数if ((typeof x === "object" && x !== null) || typeof x === "function") {// 24. 获取 x.then 可能会报错, 使用 try.catch 包裹try {// 23. 获取 x 的 then 属性, 是函数才是 promise 对象let then = x.then;if (typeof then === "function") {then.call(x,(y) => {resolve(y);},(r) => {reject(r);});} else {resolve(x);}} catch (err) {reject(err);}} else {// 22. x 为普通数据类型就直接 resolveresolve(x);}
}
let p = new MyPromise((resolve, reject) => {});

好, 这样看起来已经很完美了, 返回的是 promise 对象我们也能解决了, 但是紧接着又有一个问题, 要是里面的 promise 再返回一个 promise 呢? 我们就想到用递归来解决这个问题, 同时我们还要解决一个问题, 那就是一个 promise 的执行器函数中只会执行遇到的第一个 resolve 或者 reject 方法, 我们用新增变量来避免重复调用

  1. 当每次返回的都是 promise 对象时, 我们递归调用判断 x 的类型的函数
  2. 声明一个变量来防止构造器函数中重复执行 resolve 和 reject 方法
  3. 每次进入 then 方法时, 如果没有参数, 就直接返回一个返回参数的函数
class MyPromise {constructor(executor) {this.state = "pending";this.value = undefined;this.reason = undefined;this.onFulfilledCallbacks = [];this.onRejectedCallbacks = [];let resolve = (value) => {this.state = "fulfilled";this.value = value;this.onFulfilledCallbacks.forEach((fn) => fn());};let reject = (reason) => {this.state = "rejected";this.reason = reason;this.onRejectedCallbacks.forEach((fn) => fn());};try {executor(resolve, reject);} catch (err) {reject(err);}}then(onFulfilled, onRejected) {// 27. 每次进入 then 方法时, 如果没有参数, 就直接返回一个返回参数的函数onFulfilled =typeof onFulfilled === "function" ? onFulfilled : (value) => value;onRejected =typeof onRejected === "function"? onRejected: (reason) => {throw reason;};const p2 = new MyPromise((resolve, reject) => {let x;if (this.state === "fulfilled") {setTimeout(() => {try {x = onFulfilled(this.value);resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);}if (this.state === "rejected") {setTimeout(() => {try {x = onRejected(this.reason);resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);}if (this.state === "pending") {this.onFulfilledCallbacks.push(() => {setTimeout(() => {try {x = onFulfilled(this.value);resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);});this.onRejectedCallbacks.push(() => {setTimeout(() => {try {x = onRejected(this.reason);resolvePromise(p2, x, resolve, reject);} catch (err) {reject(err);}}, 0);});}});return p2;}
}
function resolvePromise(p2, x, resolve, reject) {// 26. 声明一个变量来防止构造器函数中重复执行 resolve 和 reject 方法let called = false;if (p2 === x) {return reject(new Error("Error: p2 is x"));}if ((typeof x === "object" && x !== null) || typeof x === "function") {try {let then = x.then;if (typeof then === "function") {then.call(x,(y) => {if (called) return;called = true;// 25. 当每次返回的都是 promise 对象时, 我们递归调用判断 x 的类型的函数resolvePromise(p2, y, resolve, reject);},(r) => {if (called) return;called = true;reject(r);});} else {resolve(x);}} catch (err) {if (called) return;called = true;reject(err);}} else {resolve(x);}
}
let p = new MyPromise((resolve, reject) => {});

总结

ok 这样就重写完了最基本的 promise , 之后我们再来补充上 promise 上面的方法包括 catch \ race \ all 等等

我觉得虽然挺难的 , 但是如果你有思路的话,顺着思路写下来其实是没问题的

结束

学习之路漫漫啊~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/179163.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows 安装 Oracle Database 19c

目录 什么是 Oracle 数据库 下载 Oracle 数据库 解压文件 运行安装程序 测试连接 什么是 Oracle 数据库 Oracle数据库是由美国Oracle Corporation(甲骨文公司)开发和提供的一种关系型数据库管理系统,它是一种强大的关系型数据库管理系统…

HarmonyOS开发(二):TypeScript入门

1、编程语言介绍 ArkTS是HarmonyOS主推的应用开发语言,它是在TypeScript语言的基础之上,匹配ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开发者以更简洁、更自然的方式开发跨端应用。 ArkTS、TypeScript和JavaScript之间…

Radiology 谈人工智能在放射学领域的10个预测方向 [文献阅读]

人工智能(AI)和信息学正在改变放射学。十年前,没有哪个专家会预测到今天放射人工智能行业的蓬勃发展,100多家人工智能公司和近400种放射人工智能算法得到了美国食品和药物管理局(FDA)的批准。 不到一年前,即使是最精明的预言家也不会相信这些…

delete 与 truncate 命令的区别

直接去看原文 原文链接:【SQL】delete 与 truncate 命令的区别_truncate和delete的区别-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- 1. 相同点 二者都能删除表中的数据…

CSRF 跨站请求伪造漏洞理解

1.漏洞描述 跨站请求伪造是一种攻击,它强制浏览器客户端用户在当前对其进行身份验证后的Web应用程序上执行非本意的操作,攻击的重点在处于更改状态请求,而不是盗取数据,因为攻击者无法查看伪造请求的响应。 2.漏洞原理 攻击者可以…

性能测试场景的设计方法

作者|李文,自如-质量中心 来源|自如技术公众号 背景 引用:根据2008年Aberdeen Group的研究报告,对于Web网站,1秒的页面加载延迟相当于少了11%的PV(page view),相当于降低…

FDTD自定义材料

官方原文档链接 该文档内容摘自原文档及相关链接 从txt导入材料数据 各项同性材料的3Dmaterials数据 txt文件中应包含以下三列。第一列为波长或频率;第二列为折射率或介电常数实部;第三列为折射率或介电常数虚部。 420 5.08894 0.237724 440 4.78…

深度学习100例-卷积神经网络(CNN)实现mnist手写数字识别 | 第1天

文章目录 前期工作1. 设置GPU(如果使用的是CPU可以忽略这步)我的环境: 2. 导入数据3.归一化4.可视化5.调整图片格式 二、构建CNN网络模型三、编译模型四、训练模型五、预测六、知识点详解1. MNIST手写数字数据集介绍2. 神经网络程序说明3. 网…

利用Vue+Echarts完成可视化任务

文章目录 任务一:用柱状图展示消费额最高的省份(一)提出任务(二)准备工作1、利用postman访问接口数据2、安装node.js3、输入更换镜像源为淘宝源4、清除npm缓存5、安装vue脚手架 任务一:用柱状图展示消费额最…

2023.11.14 hivesql的容器,数组与映射

目录 https://blog.csdn.net/m0_49956154/article/details/134365327?spm1001.2014.3001.5501https://blog.csdn.net/m0_49956154/article/details/134365327?spm1001.2014.3001.5501 8.hive的复杂类型 9.array类型: 又叫数组类型,存储同类型的单数据的集合 10.struct类型…

Kylin-Server-V10-SP3+Gbase+宝兰德信创环境搭建

目录 一、Kylin-Server-V10-SP3 安装1.官网下载安装包2.创建 VMware ESXi 虚拟机3.加载镜像,安装系统 二、Gbase 安装1.下载 Gbase 安装包2.创建组和用户、设置密码3.创建目录4.解压包5.安装6.创建实例7.登录8.常见问题 三、宝兰德安装1.获取安装包2.解压安装3.启动…

M系列 Mac使用Homebrew下载配置git和连接GitHub

一、首先我们需要安装Homebrew M系列 Mac安装配置Homebrewhttps://blog.csdn.net/W_Fe5/article/details/134428377?spm1001.2014.3001.5501 二、下载git 1、终端输入一下命令 brew install git 2、这时下载完成 二、配置git 1、创建用户名和邮箱 这里以我自己的邮箱举例…