手撕Promise-then链式调用

最新推荐文章于 2024-09-29 17:12:06 发布
最新推荐文章于 2024-09-29 17:12:06 发布
阅读量47 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyhJP/article/details/134779492
版权 
 function runAsyncTask(callback) {
        // queueMicroTask() ->  MutationObserver  -> setTimeout()
        if (typeof queueMicrotask === 'function') {
          queueMicrotask(callback)
        } else if (typeof MutationObserver === 'function') {
          const mutationObserver = new MutationObserver(callback)
          const oDiv = document.createElement('div')
          mutationObserver.observe(oDiv, { childList: true })
          oDiv.innerText = 'longge666'
        } else {
          setTimeout(callback, 0)
        }
      }

      // Promise构造函数
      // Promise状态 status pending  fulfilled rejected
      const PENDING = 'pending'
      const FULFILLED = 'fulfilled'
      const REJECTED = 'rejected'
      class Promise {
        //  实例属性
        status = PENDING
        result = undefined
        //  私有属性 this.#handlers = []
        #handles = []
        constructor(executor) {
          // console.log(executor)
          // console.log('构造函数执行了')
          const resolve = (result) => {
            if (this.status === PENDING) {
              this.status = FULFILLED
              this.result = result
              // 把之前存的函数依次取出来调用
              this.#handles.forEach(({ onFulfilled }) => {
                onFulfilled()
              })
            }
          }
          const reject = (result) => {
            if (this.status === PENDING) {
              this.status = REJECTED
              this.result = result
              // 把之前存的函数依次取出来调用
              this.#handles.forEach(({ onRejected }) => {
                onRejected()
              })
            }
          }
          executor(resolve, reject)
        }

        then(onFulfilled, onRejected) {
          onFulfilled =
            typeof onFulfilled === 'function' ? onFulfilled : (x) => x
          onRejected =
            typeof onRejected === 'function'
              ? onRejected
              : (x) => {
                  throw x
                }
          const p2 = new Promise((resolve, reject) => {
            // 判断状态
            if (this.status === FULFILLED) {
              runAsyncTask(() => {
                try {
                  const x = onFulfilled(this.result)
                  if (x instanceof Promise) {
                    // 说明返回值是一个promise的实例
                    x.then(
                      (data) => {
                        resolve(data)
                      },
                      (err) => {
                        reject(err)
                      }
                    )
                  } else {
                    // 普通值的时候
                    resolve(x)
                  }
                } catch (err) {
                  reject(err)
                }
              })
            } else if (this.status === REJECTED) {
              runAsyncTask(() => {
                onRejected(this.result)
              })
            } else {
              // 调用then的时候，状态是默认状态，把传入的两个函数存储起来
              // [{onFulfilled, onRejected},{OnFulfilled, onRejected}]
              this.#handles.push({
                onFulfilled: () => {
                  runAsyncTask(() => {
                    onFulfilled(this.result)
                  })
                },
                onRejected: () => {
                  runAsyncTask(() => {
                    onRejected(this.result)
                  })
                },
              })
            }
          })

          return p2
        }
      }

      /**/
      const p = new Promise((resolve, reject) => {
        resolve(1)
      })

      // then可以调用多次
      const p2 = p.then(
        (data) => {
          console.log(data)
          //return 'hello' // ->返回的是普通值，走then的成功回调
          //throw 123 //   ->  出错 走then的失败回调
          return new Promise((resolve, reject) => {
            reject(11111)
          })
        },
        (reason) => {
          console.log(reason)
          
        }
      )

      p2.then(
        (res) => {
          console.log(res)
        },
        (err) => {
          console.log(err)
        }
      )

手撕Promise-then回调循环引用 (1)

 function runAsyncTask(callback) {
        // queueMicroTask() ->  MutationObserver  -> setTimeout()
        if (typeof queueMicrotask === 'function') {
          queueMicrotask(callback)
        } else if (typeof MutationObserver === 'function') {
          const mutationObserver = new MutationObserver(callback)
          const oDiv = document.createElement('div')
          mutationObserver.observe(oDiv, { childList: true })
          oDiv.innerText = 'longge666'
        } else {
          setTimeout(callback, 0)
        }
      }

      function resolvePromise(p2, x, resolve, reject) {
        // 循环引用
        if (x === p2) {
          throw new TypeError('Chaining cycle detected for promise #<Promise>')
        }
        if (x instanceof Promise) {
          // 说明返回值是一个promise的实例
          x.then(
            (data) => {
              resolve(data)
            },
            (err) => {
              reject(err)
            }
          )
        } else {
          // 普通值的时候
          resolve(x)
        }
      }

      // Promise构造函数
      // Promise状态 status pending  fulfilled rejected
      const PENDING = 'pending'
      const FULFILLED = 'fulfilled'
      const REJECTED = 'rejected'
      class Promise {
        //  实例属性
        status = PENDING
        result = undefined
        //  私有属性 this.#handlers = []
        #handles = []
        constructor(executor) {
          // console.log(executor)
          // console.log('构造函数执行了')
          const resolve = (result) => {
            if (this.status === PENDING) {
              this.status = FULFILLED
              this.result = result
              // 把之前存的函数依次取出来调用
              this.#handles.forEach(({ onFulfilled }) => {
                onFulfilled()
              })
            }
          }
          const reject = (result) => {
            if (this.status === PENDING) {
              this.status = REJECTED
              this.result = result
              // 把之前存的函数依次取出来调用
              this.#handles.forEach(({ onRejected }) => {
                onRejected()
              })
            }
          }
          executor(resolve, reject)
        }

        then(onFulfilled, onRejected) {
          onFulfilled =
            typeof onFulfilled === 'function' ? onFulfilled : (x) => x
          onRejected =
            typeof onRejected === 'function'
              ? onRejected
              : (x) => {
                  throw x
                }
          const p2 = new Promise((resolve, reject) => {
            // 判断状态
            if (this.status === FULFILLED) {
              runAsyncTask(() => {
                try {
                  const x = onFulfilled(this.result)
                  resolvePromise(p2, x, resolve, reject)
                } catch (err) {
                  reject(err)
                }
              })
            } else if (this.status === REJECTED) {
              runAsyncTask(() => {
                try {
                  const x = onRejected(this.result)
                  resolvePromise(p2, x, resolve, reject)
                } catch (err) {
                  reject(err)
                }
              })
            } else {
              // 调用then的时候，状态是默认状态，把传入的两个函数存储起来
              // [{onFulfilled, onRejected},{OnFulfilled, onRejected}]
              this.#handles.push({
                onFulfilled: () => {
                  runAsyncTask(() => {
                    try {
                      const x = onFulfilled(this.result)
                      resolvePromise(p2, x, resolve, reject)
                    } catch (err) {
                      reject(err)
                    }
                  })
                },
                onRejected: () => {
                  runAsyncTask(() => {
                    try {
                      const x = onRejected(this.result)
                      resolvePromise(p2, x, resolve, reject)
                    } catch (err) {
                      reject(err)
                    }
                  })
                },
              })
            }
          })
          return p2
        }
      }

      /**/
      const p = new Promise((resolve, reject) => {
        // resolve(1)
        // reject('error')
        setTimeout(() => {
          reject(1)
        }, 1000)
      })

      // then可以调用多次
      const p2 = p.then(
        (data) => {
          console.log(data)
          return 100
        },
        (reason) => {
          console.log(reason)
          //  return 100
          // throw 123
          return new Promise((resolve, reject) => {
            reject('error')
          })
        }
      )

      p2.then(
        (res) => {
          console.log(res)
        },
        (err) => {
          console.log(err)
          //  throw err
        }
      )

      //  catch  all ...

      // promise a+规范
 function runAsyncTask(callback) {
        // queueMicroTask() ->  MutationObserver  -> setTimeout()
        if (typeof queueMicrotask === 'function') {
          queueMicrotask(callback)
        } else if (typeof MutationObserver === 'function') {
          const mutationObserver = new MutationObserver(callback)
          const oDiv = document.createElement('div')
          mutationObserver.observe(oDiv, { childList: true })
          oDiv.innerText = 'longge666'
        } else {
          setTimeout(callback, 0)
        }
      }

      function resolvePromise(p2, x, resolve, reject) {
        // 循环引用
        if (x === p2) {
          throw new TypeError('Chaining cycle detected for promise #<Promise>')
        }
        if (x instanceof Promise) {
          // 说明返回值是一个promise的实例
          x.then(
            (data) => {
              resolve(data)
            },
            (err) => {
              reject(err)
            }
          )
        } else {
          // 普通值的时候
          resolve(x)
        }
      }

      // Promise构造函数
      // Promise状态 status pending  fulfilled rejected
      const PENDING = 'pending'
      const FULFILLED = 'fulfilled'
      const REJECTED = 'rejected'
      class Promise {
        //  实例属性
        status = PENDING
        result = undefined
        //  私有属性 this.#handlers = []
        #handles = []
        constructor(executor) {
          // console.log(executor)
          // console.log('构造函数执行了')
          const resolve = (result) => {
            if (this.status === PENDING) {
              this.status = FULFILLED
              this.result = result
              // 把之前存的函数依次取出来调用
              this.#handles.forEach(({ onFulfilled }) => {
                onFulfilled()
              })
            }
          }
          const reject = (result) => {
            if (this.status === PENDING) {
              this.status = REJECTED
              this.result = result
              // 把之前存的函数依次取出来调用
              this.#handles.forEach(({ onRejected }) => {
                onRejected()
              })
            }
          }
          executor(resolve, reject)
        }

        then(onFulfilled, onRejected) {
          onFulfilled =
            typeof onFulfilled === 'function' ? onFulfilled : (x) => x
          onRejected =
            typeof onRejected === 'function'
              ? onRejected
              : (x) => {
                  throw x
                }
          const p2 = new Promise((resolve, reject) => {
            // 判断状态
            if (this.status === FULFILLED) {
              runAsyncTask(() => {
                try {
                  const x = onFulfilled(this.result)
                  resolvePromise(p2, x, resolve, reject)
                } catch (err) {
                  reject(err)
                }
              })
            } else if (this.status === REJECTED) {
              runAsyncTask(() => {
                try {
                  const x = onRejected(this.result)
                  resolvePromise(p2, x, resolve, reject)
                } catch (err) {
                  reject(err)
                }
              })
            } else {
              // 调用then的时候，状态是默认状态，把传入的两个函数存储起来
              // [{onFulfilled, onRejected},{OnFulfilled, onRejected}]
              this.#handles.push({
                onFulfilled: () => {
                  runAsyncTask(() => {
                    onFulfilled(this.result)
                  })
                },
                onRejected: () => {
                  runAsyncTask(() => {
                    onRejected(this.result)
                  })
                },
              })
            }
          })

          return p2
        }
      }

      /**/
      const p = new Promise((resolve, reject) => {
        // resolve(1)
        // reject('error')
      })

      // then可以调用多次
      const p2 = p.then(
        (data) => {
          console.log(data)
          return 100
        },
        (reason) => {
          console.log(reason)
          //  return 100
          // throw 123
          return new Promise((resolve, reject) => {
            reject('error')
          })
        }
      )

      p2.then(
        (res) => {
          console.log(res)
        },
        (err) => {
          console.log(err)
          //  throw err
        }
      )

      // promise a+规范

hyhJP
关注
04手撕promise.js
06-11
04手撕promise.js
手撕GO语言-详细注释版
12-15
【标题】"手撕GO语言-详细注释版"提供了全面深入学习Go语言的资源，适合初学者和有一定经验的开发者。这份资料包含了大量实例，旨在帮助读者快速掌握Go语言的核心概念和应用。 【描述】"学习GO语言的不二资料"表明...
8.0-8.1-8.2华为账户全网通高版本方案（手撕）
04-04
在华为解锁领域，"手撕"可能涉及到修改系统文件、解除网络锁定、恢复或更新固件等复杂步骤，需要一定的技术基础和风险意识。 以下是实现【8.0-8.1-8.2华为账户全网通高版本方案】可能涉及的关键知识点： 1. **系统...
vivo iQOO 12系统手撕方案
06-21
vivo iQOO 12系统手撕方案
OPPO 一加 真我 12系统手撕方案
06-21
OPPO 一加 真我 12系统手撕方案
如何搭建Vue脚手架
w6437286的博客
09-26 463
本文主要讲解如何搭建vue脚手架。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 1004
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 626
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1078
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
跨境电商系统基本功能和特点​
商城 / Java 商城 -首选 商城 开源 电商 商城 源码 商城
09-29 276
综上所述，跨境电商系统通过其全面的功能和特点，为全球用户提供了便捷、高效、安全的跨境购物体验。随着技术的不断进步和市场的不断发展，跨境电商系统将继续优化和完善，以适应新的挑战和机遇。
从0学习React（3）
qq_54432917的博客
09-29 416
在第一篇文章中，我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结，我也大致知道了index.tsx里的很多语法。而第二篇文章，我对index.tsx文件的框架做了一个大致的分析，通过第二篇文章，我对index.tsx有了进一步的认识。按理来讲，第三篇文章我还是解析index.tsx文件，但是我发现，对于前两篇文章，其实我对语法的细节有很多不明白的点。因此这篇文章，我就把React的一些最基础的知识给梳理一下，帮助我更好的理解index.tsx的代码。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 272
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
vue单点登录异步执行请求https://xxx.com获取并处理数据
m0_65360496的博客
09-27 296
vue单点登录异步执行请求https://xxx.com获取并处理数据
JavaScript --数字Number的常用方法
weixin_58694594的博客
09-25 587
【代码】JavaScript --数字Number的常用方法。
Ant design vue中的提示框（a-tooltip）
努力的nana
09-25 275
【代码】Ant design vue中的提示框（a-tooltip）
方法论大师 JavaScript 版本
PlayerYK的专栏
09-25 249
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
Vue脚手架搭建及vue项目创建
ning的博客
09-29 851
Vue CLI 是一个强大的工具，它简化了 Vue.js 项目的搭建和开发流程。通过几个简单的命令，我们可以快速创建一个功能完备的 Vue.js 项目，并开始开发。随着项目的深入，你还可以探索更多的 Vue CLI 功能和插件，以满足不同的开发需求。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章VUE快速入门手册——安装VUE脚手架（创建自己的第一个vue项目）Vue脚手架搭建及vue项目创建【详细教程】
Vue基础(1)
最新发布
HBR666_的博客
09-29 797
2.数据代理的理解 通过一个对象代理对另一个对象的属性的操作（读/写） 如果直接更改obj2中的x obj中的x也会更改 即通过一个对象（obj2）对另一个对象obj的属性（x）的操作。当发现被修改时，页面中用到两者的地方会自动更新，而计算属性是依赖着data中的来改变的，则会再次调用fullName，调用get方法，达到页面中插值fullName修改的效果。2.所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等，promise的回调函数），最好写成箭头函数。3.get函数什么时候执行？
nodejs fs 模块的简介与相关案例
正是修行时，正是修行时，正式修行时...
09-27 323
nodejs fs 模块的简介与相关案例
手撕buck-boost
08-04
手撕buck-boost电路是一种常见的升降压电路，用于将输入电压转换为较高或较低的输出电压。在这个电路中，输出电压Vo是恒定的，而二极管导通时的压降为Vd。电感的右端电压为Vo+Vd，而电感的左端电压为输入电压Vi。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值