手写promise笔记

最新推荐文章于 2024-04-26 17:41:55 发布
最新推荐文章于 2024-04-26 17:41:55 发布
阅读量102 收藏
点赞数
文章标签： node.js javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43991760/article/details/120747796
版权

promiss

基础版

**promise解决的问题 **

  1. 等待多个异步请求结束 promise.all

  2. 链式调用,上一个请求结果是下一个请求的参数等,解决回调地狱 promise.then

    _ 缺陷: 还是基于回调的,只是写法更优雅

promise 的特点

  1. promise 是个类
  2. promise有三个状态, resolve(成功) reject(失败) pendding(等待)
  3. promise 默认执行器立即执行
  4. 用户可以自己决定成功还是失败的状态
  5. promise都有then方法,默认有两个参数,成功的回调,可以拿到成功态的参数;失败的回调,可以拿到失败态的参数
  6. 如果执行函数时发生了异常,就走到了失败态
  7. 一旦成功态了就不能再失败了,失败态也不能再转到成功; 状态不可逆转
// 简单版promise
const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'
const PENDDING = 'PENDDING'
class Promise1 {
  constructor(executor) {
    this.value = undefined
    this.reason = undefined
    this.state = PENDDING
    let resolve = (data) => {
      if (this.state === PENDDING) {
        console.log()
        this.state = RESOLVED
        this.value = data
      }
    }
    let reject = (data) => {
      if (this.state === PENDDING) {
        this.state = REJECTED
        this.reason = data
      }
    }
    try {
      // throw new Error("抛出错误");
      executor(resolve, reject)

    } catch (err) {
      reject(err)
    }

  }
  then(onFulfilled, onRejected) {
    if (this.state === RESOLVED) {
      onFulfilled(this.value)
    }
    if (this.state === REJECTED) {
      onRejected(this.reason)
    }
  }
}

let p = new Promise1((resolve, reject) => {
  console.log('立即执行')
  resolve('成功')
  // reject('失败啦')
})
p.then((res) => { console.log('成功', res) }, (err) => { console.log('失败' + err) })
异步 调用

上面简版promise

待解决问题有1️⃣ promise 调用then时,如果异步,resolve或者reject没有完成, pedding状态,不能拿到执行后的额结果

解决方法:用发布订阅模式, then的成功回调和失败回调都存起来, 等异步结束,pengdding状态改变,再依次执行

const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'
const PENDDING = 'PENDDING'
class Promise1 {
  constructor(executor) {
    this.value = undefined
    this.reason = undefined
    this.state = PENDDING
   // ----------   新增代码
    this.onResolvedCallbacks = []
    this.onRejectedCallbacks = []
    //-------
    let resolve = (data) => {
      if (this.state === PENDDING) {
        console.log()
        this.state = RESOLVED
        this.value = data
          // -------- 发布事件
        this.onResolvedCallbacks.forEach(i => i())
          // --------
      }
    }
    let reject = (data) => {
      if (this.state === PENDDING) {
        this.state = REJECTED
        this.reason = data
          // ----- 发布事件
        this.onRejectedCallbacks.forEach(i => i())
          // -----
      }
    }
    try {
      // throw new Error("loopTerminates");
      executor(resolve, reject)

    } catch (err) {
      reject(err)
    }

  }
  then(onFulfilled, onRejected) {
    if (this.state === RESOLVED) {
      onFulfilled(this.value)
    }
    if (this.state === REJECTED) {
      onRejected(this.reason)
    }
      // -------------- 异步,状态为pendding,先订阅事件
    if (this.state === PENDDING) {
      this.onResolvedCallbacks.push(() => {
        onFulfilled(this.value)
      })
      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason)
      })
    }
      // ---------------
  }
}

let p = new Promise1((resolve, reject) => {
  console.log('立即执行')
  setTimeout(() => {
    resolve('成功')
  }, 200);

  // reject('失败啦')
})
p.then((res) => { console.log('成功', res) }, (err) => { console.log('失败' + err) })
p.then((res) => { console.log('成功2', res) }, (err) => { console.log('失败2' + err) })

then特性

promise then 特性

  1. promise 失败和成功的返回值可以传递到下一个then里面

  2. 如果返回值是普通值, 传递到下一个then的成功回调里.

    如果抛出错误,传递到失败回调里;

    如果返回值是promise,则根据promise的结果,resolve就传递到成功回调,reject就传递到失败回调里

  3. 错误处理,如果最近的then里面没有错误处理,会向下找错误回调,处理错误

  4. promise.then返回一个新的promise 而不是this(因为promise状态不可逆,不会成功转失败等)

const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'
const PENDDING = 'PENDDING'
// -------根绝返回值x确定如果处理promise结果
function resolvePromise(promise2, x, resolve, reject) {

  if (promise2 === x) { // 自己调自己,报类型错误
    throw new Error('TypeError')
  }
  let called; // unfined 用于处理别人得posmise可能出现先成功又失败等情况;
  if ((typeof x === 'object' && x != null) || typeof x === 'function') {
    try {
      // x 是对象或者函数,有可能是promise
      let then = x.then
      if (typeof then === 'function') {
        // 假定是promise
        then.call(x, y => {

          if (called) return
          called = true // 成功,失败,异常,只能调用一次,promise状态不能更改
          // 成功回调
          resolvePromise(promise2, y, resolve, reject) // 递归解析,如果resolve返回一个promise

        }, e => {
          if (called) return
          called = true
          // 失败回调
          reject(e)
        })
      } else { // 普通对象,刚好有then方法

        resolve(x)
      }
    } catch (e) {
      if (called) return
      called = true
      reject(e)
    }

  } else { // x 是普通值
    resolve(x)
  }
}
// --------方法结束
class Promise1 {
  constructor(executor) {
    this.value = undefined
    this.reason = undefined
    this.state = PENDDING
    this.onResolvedCallbacks = []
    this.onRejectedCallbacks = []
    let resolve = (data) => {
      if (this.state === PENDDING) {
        console.log()
        this.state = RESOLVED
        this.value = data
        this.onResolvedCallbacks.forEach(i => i())
      }
    }
    let reject = (data) => {
      if (this.state === PENDDING) {
        this.state = REJECTED
        this.reason = data
        this.onRejectedCallbacks.forEach(i => i())
      }
    }
    try {
      // throw new Error("loopTerminates");
      executor(resolve, reject)

    } catch (err) {
      reject(err)
    }

  }
  then(onFulfilled, onRejected) {
      // 返回的promise2 
    let promise2 = new Promise1((resolve, reject) => {
      if (this.state === RESOLVED) {
        setTimeout(() => { // 异步,才能在下面resolvePromise中拿到promise2的值
          // 1,x是普通值,还是promise? 2,怎么处理x  
          try {
            let x = onFulfilled(this.value)
            // 处理x和promise返回值
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }

        }, 0)
      }
      if (this.state === REJECTED) {
        setTimeout(() => { // 异步,才能在下面resolvePromise中拿到promise2的值
          // 1,x是普通值,还是promise? 2,怎么处理x  
          try {
            let x = onRejected(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }

        }, 0)

      }
      if (this.state === PENDDING) {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => { // 异步,才能在下面resolvePromise中拿到promise2的值
            // 1,x是普通值,还是promise? 2,怎么处理x         
            try {
              let x = onFulfilled(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => { // 异步,才能在下面resolvePromise中拿到promise2的值
            // 1,x是普通值,还是promise? 2,怎么处理x         
            try {
              let x = onRejected(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
      }
    })

    return promise2

  }
}

let p1 = new Promise1((resolve, reject) => {
  throw new Error('抛出错误信息');
  resolve('111')
})
let p2 = p1.then((data) => {
  return new Promise1((resolve, reject) => {
    setTimeout(() => {
      resolve(new Promise1((resolve, reject) => {
        resolve('20000')
      }))
    }, 500)

  })
}, e => {
  console.log('===', e)
})
// reject('失败啦')

p2.then((res) => { console.log('成功', res) }, (err) => { console.log('失败' + err) })
最终版
  • 添加then穿透,; resolve,reject传参不是function时,自动补全函数,参数下传
  • promises-aplus-tests promise规则校验
const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'
const PENDDING = 'PENDDING'
function resolvePromise(promise2, x, resolve, reject) {

  if (promise2 === x) { // 自己调自己,报类型错误
    return reject(new TypeError('TypeError'))
  }
  let called; // unfined 用于处理别人得posmise可能出现先成功又失败等情况;
  if ((typeof x === 'object' && x != null) || typeof x === 'function') {
    try {
      // x 是对象或者函数,有可能是promise
      let then = x.then
      if (typeof then === 'function') {
        // 假定是promise
        then.call(x, y => {

          if (called) return
          called = true // 成功,失败,异常,只能调用一次,promise状态不能更改
          // 成功回调
          resolvePromise(promise2, y, resolve, reject) // 递归解析,如果resolve返回一个promise

        }, e => {
          if (called) return
          called = true
          // 失败回调
          reject(e)
        })
      } else { // 普通对象,刚好有then方法

        resolve(x)
      }
    } catch (e) {
      if (called) return
      called = true
      reject(e)
    }

  } else { // x 是普通值
    resolve(x)
  }

}
class Promise1 {
  constructor(executor) {
    this.value = undefined
    this.reason = undefined
    this.state = PENDDING
    this.onResolvedCallbacks = []
    this.onRejectedCallbacks = []
    let resolve = (data) => {
      if (this.state === PENDDING) {
        console.log()
        this.state = RESOLVED
        this.value = data
        this.onResolvedCallbacks.forEach(i => i())
      }
    }
    let reject = (data) => {
      if (this.state === PENDDING) {
        this.state = REJECTED
        this.reason = data
        this.onRejectedCallbacks.forEach(i => i())
      }
    }
    try {
      // throw new Error("loopTerminates");
      executor(resolve, reject)

    } catch (err) {
      reject(err)
    }

  }
  then(onFulfilled, onRejected) {
    // onFulfilled, onRejected 可选参数,如果没有值,默认透传
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err }
    let promise2 = new Promise1((resolve, reject) => {
      if (this.state === RESOLVED) {
        setTimeout(() => { // 异步,才能在下面resolvePromise中拿到promise2的值
          // 1,x是普通值,还是promise? 2,怎么处理x  
          try {
            let x = onFulfilled(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }

        }, 0)
      }
      if (this.state === REJECTED) {
        setTimeout(() => { // 异步,才能在下面resolvePromise中拿到promise2的值
          // 1,x是普通值,还是promise? 2,怎么处理x  
          try {
            let x = onRejected(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }

        }, 0)

      }
      if (this.state === PENDDING) {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => { // 异步,才能在下面resolvePromise中拿到promise2的值
            // 1,x是普通值,还是promise? 2,怎么处理x         
            try {
              let x = onFulfilled(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => { // 异步,才能在下面resolvePromise中拿到promise2的值
            // 1,x是普通值,还是promise? 2,怎么处理x         
            try {
              let x = onRejected(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
      }
    })

    return promise2

  }
}

// let p1 = new Promise1((resolve, reject) => {
// reject('222')
// throw new Error('抛出错误信息');
// resolve('111')
// })
// let p2 = p1.then((data) => {
//   return new Promise1((resolve, reject) => {
//     setTimeout(() => {
//       resolve(new Promise1((resolve, reject) => {
//         resolve('20000')
//       }))
//     }, 500)

//   })
// }, e => {
//   console.log('===', e)
// })
// reject('失败啦')

// p1.then().then().then((res) => { console.log('成功', res) }, (err) => { console.log('失败' + err) })

// 用 promises-aplus-tests 进行测试
Promise1.defer = Promise1.deferred = function () {
  let dfd = {};
  dfd.promise = new Promise1((resolve, reject) => {
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd;
}
module.exports = Promise1
熊本熊在跳舞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS手写Promise源码
12-19
为什么要手写Promise？1、深入理解Promise的工作原理：手写Promise可以帮助我们更深入地理解Promise的工作原理和内部机制。通过手动实现Promise的核心功能，如异步调用、状态管理和回调处理，我们可以更好地理解...
手写Promise.js
11-13
Promise的手写代码，请配合博客《JavaScprit》异步编程（三）深入浅出Promise使用
Promise的使用
weixin_48175704的博客
03-31 111
Promise的使用1.Promise介绍与基本使用 1.Promise介绍与基本使用 作用：Promise是异步编程的一种解决方案，promise对象用来封装一个异步操作并可以获取其成功/失败的结果值 常见的就是异步编程就是网络请求，定时器 ...
Promise原理和问题集锦
juse__we的博客
03-29 1542
参考网站： https://www.cnblogs.com/lvdabao/p/es6-promise-1.html https://www.cnblogs.com/minigrasshopper/p/9141307.html https://segmentfault.com/a/1190000011652907 promise原理 其实，promise就是三个状态。利用观察者模式...
ES6 Promise用法小结
热门推荐
涂涂
07-25 38万+
目录 1.什么是Promise reject的用法 catch的用法 all的用法 race的用法 1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操...
async await 与 promise
qq_36196273的博客
01-21 263
async 返回值相当于返回了一个promise 对象 await 可以理解为执行了promise对象的resolve方法，至于resolve方法更深层的东西，那就需要不了解的同学自己去研究了。 promise 首先，通过一段代码来看一下promise是如何使用的 demometh(){ returnnewPromise((resolve,reject)=>{ let result=true; resolve(result)...
手写Promise 笔记
qq_46599143的博客
04-18 68
【代码】手写Promise 笔记。
分析化学手写笔记.zip
07-09
分析化学手写笔记
离散数学手写笔记.pdf
09-04
西电计科离散数学手写笔记（笔者期末95+），内容较多较为详实，适合在期末复习的时候翻翻看看
大物上册手写笔记.pdf
09-04
西电大学物理上册的手写笔记（笔者期末90+），笔记质量较高，可以在期末复习的时候看看
【Node.js】03 —— HTTP 模块探索
Allen-
04-23 627
Node.js的HTTP模块提供了一套完整的网络通信API，无论是构建服务端应用还是发起客户端请求，都能满足我们的需求。通过灵活运用这些API，我们可以打造高效稳定的网络服务。
如何在本地创建一个贪吃蛇小游戏node.js服务并实现无公网IP远程游玩
bushibrnxiaohaij的博客
04-18 1498
文章目录前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口5.固定公网地址 正文开始前给大家推荐个网站，前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation（原为 Node.js Foundation，
Node.js在前端的妙用：打造更出色的Web体验
weixin_47238919的博客
04-23 310
Node.js的出现为前端开发者带来了无限的可能性和创新空间。通过结合Node.js与现有的前端技术，我们可以构建更加强大、高效和可靠的Web应用，为用户带来更优秀的上网体验。让我们一起拥抱Node.js，探索更多前端开发的新奇之处吧！
【nvm最新解决方案】Node.js v16.20.2 is not yet released or available
qq_43816375的博客
04-20 725
【nvm最新解决方案】Node.js v16.20.2 is not yet released or available。例如，我的路径是：C:\Users\TYW\AppData\Roaming\nvm。解决办法：下载想安装的node压缩包，放入nvm对应目录。1、选择对应的node版本：例如，我选的是v20.x。3、最后，丢入nvm对应的node路径。4、最后的最后了，执行nvm命令吧~
node.js && egg.js
最新发布
weixin_45678402的博客
04-26 212
nodejs
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 351
步骤很详细，直接上教程……
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 341
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1006
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 509
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
手写promise面试
01-08
手写Promise面试是一个通过手写代码来展示对Promise的理解和掌握程度的面试环节。在面试中，面试官往往会要求面试者用纸笔手写一个简单的Promise实现，或者是解答一些与Promise相关的问题。 首先，面试者需要熟悉...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值