手写promise过程

最新推荐文章于 2024-08-13 15:18:24 发布
最新推荐文章于 2024-08-13 15:18:24 发布
阅读量88 收藏
点赞数
分类专栏： promise实战 promise调用 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/etemal_bright/article/details/115528024
版权
  1. 第一版
<!DOCTYPE html>

<div>手写promise</div>

<script>
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise{
 constructor(executor){
   executor(this.resolve, this.reject)
 }
 state = PENDING
 res = null
 err = null

 resolve = (r) => {
   if(this.state === PENDING){
     this.state = FULFILLED
     this.res = r
   }
 }
 reject = (e) => {
   if (this.state === PENDING) {
     this.state = REJECTED
     this.err = e
   }
 }

 then(onFulFilled,onRejected){
   if(this.state === FULFILLED){
     onFulFilled(this.res)
   } else if(this.state === REJECTED){
     onRejected(this.err)
   }
 }
}


var prmosise = new MyPromise((resolve,reject)=>{
 resolve('SUCCESS')
 reject('ERROR')
})
prmosise.then(res=>{
 console.log('resolve',res)
},err=>{
  console.log('reject',err)
})

</script>

在这里插入图片描述

var prmosise = new MyPromise((resolve,reject)=>{
  setTimeout(res=>{
   resolve('SUCCESS')// 此时加异步无法执行 因为then是立即执行函数 会导致主线程走完在调取setTimeout，此时的state是pending ，resolve无法返回值，所以resolve里面要执行缓存的reaolveCallback函数
  },2000)
})
prmosise.then(res=>{
  console.log('resolve',res)
},err=>{
   console.log('reject',err)
})

无输出

此时加异步无法执行 因为then是立即执行函数 会导致主线程走完在调取setTimeout，此时的state是pending ，resolve无法返回值，所以resolve里面要执行缓存的reaolveCallback函数

  1. 第二版，<支持异步逻辑>
<script>
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise{
  constructor(executor){
    executor(this.resolve, this.reject)
  }
  state = PENDING
  res = null
  err = null
  onFulFilledCallback = null
  onRejectedCallback = null

  resolve = (r) => {
    if(this.state === PENDING){
      this.state = FULFILLED
      this.res = r
      this.onFulFilledCallback && this.onFulFilledCallback(r)
    }
  }
  reject = (e) => {
    if (this.state === PENDING) {
      this.state = REJECTED
      this.err = e
      this.onRejectedCallback && this.onRejectedCallback(e)
    }
  }

  then(onFulFilled,onRejected){
    if(this.state === FULFILLED){
      onFulFilled(this.res)
    } else if(this.state === REJECTED){
      onRejected(this.err)
    } else if (this.state === PENDING){ // 缓存resolve和reject方法，为了异步使用
      this.onFulFilledCallback = onFulFilled
      this.onRejectedCallback = onRejected
    }
  }
}


var prmosise = new MyPromise((resolve,reject)=>{
  setTimeout(res=>{
   resolve('SUCCESS')
  },2000)
})
prmosise.then(res=>{
  console.log('resolve',res) // 输出resolve SUCCESS
},err=>{
   console.log('reject',err)
})

</script>

使用第二版的执行以下逻辑

var promise = new MyPromise((resolve,reject)=>{
  setTimeout(res=>{
   resolve('SUCCESS')
  },2000)
})
  promise.then(value => {
    console.log(1)
    console.log('resolve', value)
  })

  promise.then(value => {
    console.log(2)
    console.log('resolve', value)
  })

  promise.then(value => {
    console.log(3)
    console.log('resolve', value)
  })

输出
3
promise.html:64 resolve SUCCESS
为什么 1，2丢了呢？因为最后一次的then方法会把前两次的覆盖掉
如何实现都出来呢？那就需要把之前的两次的方法给缓存起来

  1. 第三版 <实现then方法多次条用添加多个处理函数>
<script>
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise{
  constructor(executor){
    executor(this.resolve, this.reject)
  }
  state = PENDING
  res = null
  err = null
  onFulFilledCallbacks = []
  onRejectedCallbacks = []

  resolve = (r) => {
    if(this.state === PENDING){
      this.state = FULFILLED
      this.res = r
      this.onFulFilledCallbacks.forEach(itemFun => {
        itemFun && itemFun(r)
      })
    }
  }
  reject = (e) => {
    if (this.state === PENDING) {
      this.state = REJECTED
      this.err = e
      this.onRejectedCallbacks.forEach(itemFun => {
        itemFun && itemFun(e)
      });
    }
  }

  then(onFulFilled,onRejected){
    if(this.state === FULFILLED){
      onFulFilled(this.res)
    } else if(this.state === REJECTED){
      onRejected(this.err)
    } else if (this.state === PENDING){ // 缓存resolve和reject方法，为了异步使用
      this.onFulFilledCallbacks.push(onFulFilled)
      this.onRejectedCallbacks.push(onRejected)
    }
  }
}


var promise = new MyPromise((resolve,reject)=>{
  setTimeout(res=>{
   resolve('SUCCESS')
  },2000)
})
  promise.then(value => {
    console.log(1)
    console.log('resolve', value)
  })

  promise.then(value => {
    console.log(2)
    console.log('resolve', value)
  })

  promise.then(value => {
    console.log(3)
    console.log('resolve', value)
  })

</script>

在这里插入图片描述

使用第三版无法处理then链式调用的问题
如下

var promise = new MyPromise((resolve,reject)=>{
  resolve('success')
}).then(value => {
  return new MyPromise((resolve, reject) => {
    resolve('1')
  })
}).then(value => {
  return new MyPromise((resolve, reject) => {
    resolve('2')
  })
}).then(value => {
  return new MyPromise((resolve, reject) => {
    resolve('3')
  })
})

在这里插入图片描述
在这里插入图片描述

因为之前写的then都是一个立即执行函数 并不是又返回一个promise
接下来我们来实现它

  1. 第四版 <实现then的链式调用>
    需要知道链式调用的原理 ：
    即then返回一个promise
<script>
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise{
  constructor(executor){
    executor(this.resolve, this.reject)
  }
  state = PENDING
  res = null
  err = null
  onFulFilledCallbacks = []
  onRejectedCallbacks = []

  resolve = (r) => {
    if(this.state === PENDING){
      this.state = FULFILLED
      this.res = r
      this.onFulFilledCallbacks.forEach(itemFun => {
        itemFun && itemFun(r)
      })
    }
  }
  reject = (e) => {
    if (this.state === PENDING) {
      this.state = REJECTED
      this.err = e
      this.onRejectedCallbacks.forEach(itemFun => {
        itemFun && itemFun(e)
      });
    }
  }

  then(onFulFilled,onRejected){
    // if(this.state === FULFILLED){
    //   onFulFilled(this.res)
    // } else if(this.state === REJECTED){
    //   onRejected(this.err)
    // } else if (this.state === PENDING){ // 缓存resolve和reject方法，为了异步使用
    //   this.onFulFilledCallbacks.push(onFulFilled)
    //   this.onRejectedCallbacks.push(onRejected)
    // }
    return new MyPromise((resolve, reject) => {
      debugger
      if(this.state === FULFILLED){
        const x = onFulFilled(this.res)
        resolvePrmiseFun(x, resolve, reject) // 集中处理
      } else if(this.state === REJECTED){
        onRejected(this.err)
      } else if (this.state === PENDING) {
        this.onFulFilledCallbacks.push(onFulFilled)
        this.onRejectedCallbacks.push(onRejected)
      }
    })
  }
}
function resolvePrmiseFun(x, resolve, reject){
  // 判断x是不是 MyPromise 实例对象
  if(x instanceof MyPromise){
    x.then(resolve, reject)
  } else {
    resolve(x)
  }
}


var promise = new MyPromise((resolve,reject)=>{
  resolve('success')
}).then(value => {
  return new MyPromise((resolve, reject) => {
    console.log('resolve',value)
    resolve('1')
  })
}).then(value => {
  return new MyPromise((resolve, reject) => {
    console.log('resolve', value)
    resolve('2')
  })
}).then(value => {
  return new MyPromise((resolve, reject) => {
    console.log('resolve', value)
    resolve('3')
  })
})

</script>

在这里插入图片描述

阿奇是只猪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js代码-手写promise.all
07-16
// 这里将实现手写Promise.all的逻辑 }); } ``` 接下来，我们需要跟踪Promise的状态。我们可以创建一个计数器来记录已解析的Promise数量，以及一个存储结果的数组： ```javascript let resolvedCount = 0; let ...
js代码-手写Promise
07-15
本文将围绕“js代码-手写Promise”这一主题，详细解析Promise的核心概念和实现过程。 Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。这些状态是非可变的，一旦改变就不会再次...
手写简易Promise
Fsskay的博客
01-14 66
先写一个最简单的同步的Promise, 首先根据Promise的A+规范 // Promise三个状态,pending,fulfilled,rejected .两个值value,reason. // Promise接收回调函数,回调函数的参数为resolve跟reject // // then方法 // promise.then(onFulfilled(接受Promise的value值), onRejected(接收Promise的reason值)) //使用try catch处理报错 <scri
JS手写Promise（详细过程）
m0_56698268的博客
03-28 1894
手写Promise
PromiseA+规范之手写Promise
程邓楠的博客
11-04 3386
@[TOC](文章目录) 前言 1、Promise 的意义？ 在javascript的世界中，所有代码都是单线程执行的，由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。Ajax可以解决这个问题，但是并不好复用。JQuery的链式调用同样可以解决，每次调用都会返回一个JQuery对象。为了更好的处理Promise 出现了，并且ECMAScript 对其进行了规范。 2、PromiseA+规范是什么？ 其实Promise规范有很多，如Promise/A，...
保姆级教程，一次性搞懂手写Promise的全过程，彻底搞懂Promise原理
weixin_40572302的博客
04-27 790
Promise是一个有状态的构造函数，出自ES6,主要用于实现异步编程，API请求等。它的出现避免了以往的回调地狱的问题，使得代码更加清晰，易于维护。该构造函数主要有以下几部分组成，分别是：构造器，实例方法：then,catch,finally。静态方法：resolve,reject,race,all等。
超详细！全面搞懂手写Promise其过程
书呆子ITme
08-13 882
Promise是JavaScript中用于处理异步操作的一种方式。它提供了一种简洁且强大的方法来处理异步代码，避免了方法回调。本文将详细讲解如何从零开始手写一个Promise，帮助您深入理解其工作原理。PromisePending（待定）：初始状态，既不是成功也不是失败。Fulfilled（已兑现）：操作成功完成。Rejected（已拒绝）：操作失败。通过手写Promise，我们深入了解了其内部工作原理。希望这篇技术文档对您理解Promise有所帮助。如果在实践中遇到问题，建议参考ES6标准中的。
超详细！一次性搞懂手写Promise全过程
qq_41852789的博客
12-30 7692
手写promise超详细步骤，帮助大家理解每一步代码的含义
手写Promise源码
2401_84092360的博客
04-23 542
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载try {reject(e)}, 0)try {reject(e)}, 0)} else {try {reject(e)}, 0)});});// 在类当中建立一个方法，并且接收一个回调函数作为参数，不管成功或失败，都要调用该回调函数/**通过then方法得到当前promise对象的状态。
手写promise，面试无敌
dear_mRZhou_的博客
06-24 1619
我们面试的时候经常会问到Promise的使用；有的面试官再深入一点，会继续问是否了解Promise的实现方式，或者有没有阅读过Promise的源码；今天我们就来看一下，Promise在内部是如何实现来链式调用的。 首先我们定义一个promise的构造函数 在这里插入代码片 ...
手写简化版 Promise 详解
wujiayu31415的博客
07-26 416
不过，基于我们之前的简化实现，我们可以继续添加一些重要的功能，比如。实现需要包含几个关键部分：状态管理、执行器（executor）函数、以及处理成功和失败的回调函数的队列。方法中，我们尝试执行回调函数，并根据返回值进行进一步的处理。方法中的回调函数在下一个事件循环中执行，从而模拟真实的异步行为。这个实现仍然有许多简化和未处理的情况，比如循环引用的检测、在完整的实现中，你需要添加对这些情况的处理。中解决得最快的一个解决时解决，其解决值与那个最快的。，这些方法的实现需要额外的逻辑来跟踪和管理多个。
js代码-手写promise.allSettled
07-14
在这个手写`promise.allSettled`的过程中，我们可以深入理解Promise的工作原理和设计模式。 首先，我们需要明白`Promise.allSettled`的核心功能：当传入的Promise数组中的每个Promise都达到settled状态（即...
VB+ACCESS户籍管理系统(论文+系统).zip
08-16
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
TCL TC19T电磁炉原理图.rar
08-16
TCL TC19T电磁炉原理图
全球与中国活塞式压缩机市场现状及未来发展趋势（2024版）.docx
08-16
全球与中国活塞式压缩机市场现状及未来发展趋势（2024版）.docx
Qt5.9 C++开发指南示例代码
08-16
时间日期与定时器
基于Springboot的学院个人信息管理系统（有报告） Javaee项目，springboot项目
最新发布
08-16
资源详情：https://blog.csdn.net/2302_78191516/article/details/141270029
手柄映射键盘macos和Windows手柄映射工具
08-16
手柄映射键盘macos和Windows手柄映射工具，十分好用
手写promise面试
01-08
手写Promise面试是一个通过手写代码来展示对Promise的理解和掌握程度的面试环节。在面试中，面试官往往会要求面试者用纸笔手写一个简单的Promise实现，或者是解答一些与Promise相关的问题。 首先，面试者需要熟悉Promise的基本概念和用法，包括Promise的三种状态（pending、fulfilled、rejected）、then方法的使用，以及Promise的错误处理等内容。 其次，在手写Promise的环节中，面试者需要能够清晰地表达出Promise的基本结构和实现方式，包括Promise的构造函数、resolve和reject方法的定义，以及then方法和catch方法的实现。 除此之外，面试者还需要展示出对Promise链式调用和异步操作的处理能力，以及如何正确地处理Promise中的错误和异常情况。 总的来说，手写Promise面试是一个考察面试者对Promise的理解程度、编码能力和解决问题能力的环节，通过这个环节，面试官可以更直观地了解面试者对Promise的掌握程度和工作实际能力。因此，在准备手写Promise面试时，面试者需要通过大量的练习和理解，确保自己能够熟练地手写出一个符合Promise规范的简单实现，并对相关问题进行正确的解答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值