从里到外看透Promise

最新推荐文章于 2024-09-14 22:18:26 发布
最新推荐文章于 2024-09-14 22:18:26 发布
阅读量76 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40693662/article/details/132842054
版权

本篇文章将从零手写一个Promise，实现Promise的then , catch 实例方法；和all，allSettled，等静态方法。如有疑问或其他问题欢迎留言指教。

首先我们来实现一个裸的，简易版Promise，请看下文

class MyPromise {
	state = 'pending' // 定义promise 的状态 pending | fulfilled | rejected
	resolveCallbacks = [] // .then 订阅的方法会放在这里面，等待resolve后执行

	constructor(fn) {
		// fn 是实例promise 时传入的函数
		// resolve 的回调, 传入 value = 1
		const resolveHandler = (value) => {
			if(this.state === 'pending') {
				this.state = 'fulfilled'
				this.value = value
				this.resolveCallbacks.forEach(fn => fn())
			}
		}
		// reject 的回调
		const rejectHandler = () => {}
		// 避免传入的fn运行时候报错，使用try{} catch{} 包裹
		try{
			fn(resolveHandler, rejectHandler)
		}catch(error){
		}
	}
	then(fn) {
		// fn 对应p1.then() 里面传入的函数
		if(this.state === 'pending') {
			// 把函数放入resolveCallbacks 数组，等待2s钟后resolve 执行时候调用
			this.resolveCallbacks.push(() => {
				// 	2s钟后调用，this.value 就会是 resolve(1) -- 1 这个值
				fn(this.value)
			})
		}
	}
}

const p1 = new MyPromise((resolve, reject) => {
	setTimeout(() => {
		resolve(1)
	}, 2000)
})

p1.then(res => {
	console.log(res) // 2s 后，1 就被打印出来了
})
  • 简单的实现后会发现有几点问题
  • 问题1: .then() 方法传入的是两个函数，传入两个函数该怎么实现呢？
  • 问题2: .then 方法只执行了一种状态，=== pending 的时候，那么 等于其他两个状态的时候又是怎样的逻辑呢？
  • 问题3: .then() 返回的是一个链式调用，还能继续执行.then 或者 .catch 方法。这样的实现又是怎么的过程？
  • 带着这三个问题，我们再来更改一下以上的代码实现
class MyPromise {
    // 定义promise 的状态 pending | fulfilled | rejected
    state = 'pending' 
    // 接收resolve 的值
    value = undefined 
    // 接收reject 的值
    error = undefined
    // .then 订阅的方法会放在这里面，等待resolve后执行
    resolveCallbacks = [] 
    // .catch 订阅的方法会放在这里面，等待reject后执行
    rejectCallbacks = [] 

    // fn 是实例promise 时传入的函数
    constructor(fn) {
      // resolve 的回调, 传入 value = 1
      const resolveHandler = (value) => {
        if(this.state === 'pending') {
          this.state = 'fulfilled'
          this.value = value
          this.resolveCallbacks.forEach(fn => fn())
        }
      }
      // reject 的回调
      const rejectHandler = (e) => {
        if(this.state === 'pending') {
          this.state = 'reject'
          this.error = e
          this.rejectCallbacks.forEach(fn => fn())
        }
      }
      // 避免传入的fn运行时候报错，使用try{} catch{} 包裹
      try{
        fn(resolveHandler, rejectHandler)
      }catch(error){
      	// 函数报错，执行reject
        rejectHandler(error)
      }
    }
    // fn, fn2 对应p1.then() 里面传入的函数
    then(fn1, fn2) {
      // 首先判断fn1 和 fn2 是否是传入的函数
      fn1 = typeof fn1 === 'function' ? fn1 : (v) => v
      fn2 = typeof fn2 === 'function' ? fn2 : (v) => v
      
      if(this.state === 'pending') {
        // 把函数放入resolveCallbacks 数组，等待2s钟后resolve 执行时候调用
        return new MyPromise((resolve, reject) => {
          this.resolveCallbacks.push(() => {
            // 	2s钟后调用，this.value 就会是 resolve(1) -- 1 这个值
            try {
              const res = fn1(this.value)
              resolve(res || this.value)
            }catch(err) {
              console.log(err)
              reject(err)
            }
          })

          // reject 存入数据，等待调用
          this.rejectCallbacks.push(() => {
            try {
              const res = fn2(this.error)
              reject(res || this.error)
            } catch (error) {
              reject(error)
            }
          })
        })
      }

      // 执行的是resolve 的同步状态
      if(this.state === 'fulfilled') {
        return new MyPromise((resolve, reject) => {
          // 处理函数有返回值
          try {
            const res = fn1(this.error)
            reject(res || this.error)
          } catch (err) {
            reject(err)
          }
        })
      }
      // 执行的是reject 的同步状态
      if(this.state === 'rejected') {
        return new MyPromise((resolve, reject) => {
          // 处理函数有返回值
          try {
            const res = fn2(this.error)
            reject(res || this.error)	
          } catch (err) {
            reject(err)
          }
        })
      }
    }
    // catch 相当于then的语法糖，直接调用.then 
    catch (fn) {
      return this.then(null, fn) 
    }
 }
const p1 = new MyPromise((resolve, reject) => {
	setTimeout(() => {
		resolve(1)
	}, 2000)
})
// 传入两个参数
p1.then(res => {
	console.log(res) // 2s 后，1 就被打印出来了
}, err => console.log(err))

const p2 = new MyPromise((resolve, reject) => {
	resolve(1)
})

至此，我们上面提出的问题也全部解决，Promise 的 then 和 catch 方法就实现完成了。到这里我们的工作还没有结束，promise 除了能使用new Promise() 调用外还能 Promise.reslove() 来执行函数，这些函数就是Promise上面的静态方法。话不多说，上代码

Promise.resolve()

class MyPromise {
   ...
   static resolve (value) {
    return new MyPromise((resolve, reject) => {
       resolve(value)
     })
   }
   ...
}
  • Promise.reject() 同理

Promise.all()

 class MyPromise {
	...
	static all(list) {
      const p = new MyPromise((resolve, reject) => {
        const res = []
        // 遍历里面所有的方法        
        list.forEach(p => {
          p.then(d => {
            res.push(d)
            if(list.length === res.length) {
              resolve(res)
            }
          }).catch(err => {
          	// 	有一个失败，返回失败
            reject(err)
          })
        })
      }) 
      // 返回一个Promise 对象
      return p
    }
	...
}

Promise.allSettled()

...
 static allSettled (list) {
   const p = new MyPromise((resolve)  => {
   	// 成功和失败的结果都放入数组
     let result = []
     list.forEach(fn => {
       fn.then(res => {
         result.push({status: 'fulfilled', value: res})
         // 所有方法都返回后，执行resolve
         if(result.length === list.length) {
           resolve(result)
         }
       }).catch(err => {
         result.push({status: 'rejected', reason: err})
         // 所有方法都返回后，执行resolve
         if(result.length === list.length) {
           resolve(result)
         }
       })
     })
   })
   return p
 }
...

Promise.race()

static race (list) {
  const p = new MyPromise((resolve, reject) => {
  	// 判断是否有promise 已经 返回（不管是错误返回还是正确返回）
    let bool = false
    list.forEach(fn => {
      fn.then(res => {
      	// 只返回第一次的promise
        if(!bool) {
          resolve(res)
          bool = true
        }
      }).catch(err => {
      	// 只返回第一次的promise
        if(!bool) {
          console.log(err,'err');
          resolve(err)
          bool = true
        }
      })
    })
  })
  return p
}
  • 完整代码如下
class MyPromise {
    // 定义promise 的状态 pending | fulfilled | rejected
    state = 'pending' 
    // 接收resolve 的值
    value = undefined 
    // 接收reject 的值
    error = undefined
    // .then 订阅的方法会放在这里面，等待resolve后执行
    resolveCallbacks = [] 
    // .catch 订阅的方法会放在这里面，等待reject后执行
    rejectCallbacks = [] 
    // fn 是实例promise 时传入的函数
    constructor(fn) {
      // resolve 的回调, 传入 value = 1
      const resolveHandler = (value) => {
        if(this.state === 'pending') {
          this.state = 'fulfilled'
          this.value = value
          this.resolveCallbacks.forEach(fn => fn())
        }
      }
      // reject 的回调
      const rejectHandler = (e) => {
        if(this.state === 'pending') {
          this.state = 'reject'
          this.error = e
          this.rejectCallbacks.forEach(fn => fn())
        }
      }
      // 避免传入的fn运行时候报错，使用try{} catch{} 包裹
      try{
        fn(resolveHandler, rejectHandler)
      }catch(error){
        rejectHandler(error)
      }
    }
    // fn, fn2 对应p1.then() 里面传入的函数
    then(fn1, fn2) {
      // 首先判断fn1 和 fn2 是否是传入的函数
      fn1 = typeof fn1 === 'function' ? fn1 : (v) => v
      fn2 = typeof fn2 === 'function' ? fn2 : (v) => v
      if(this.state === 'pending') {
        // 把函数放入resolveCallbacks 数组，等待2s钟后resolve 执行时候调用
        return new MyPromise((resolve, reject) => {
          this.resolveCallbacks.push(() => {
            // 	2s钟后调用，this.value 就会是 resolve(1) -- 1 这个值
            try {
              const res = fn1(this.value)
              resolve(res || this.value)
            }catch(err) {
              console.log(err)
              reject(err)
            }
          })

          // reject 存入数据，等待调用
          this.rejectCallbacks.push(() => {
            try {
              const res = fn2(this.error)
              reject(res || this.error)
            } catch (error) {
              reject(error)
            }
          })
        })
        
      }

      // 执行的是resolve 的同步状态
      if(this.state === 'fulfilled') {
        return new MyPromise((resolve, reject) => {
          // 处理函数有返回值
          try {
            const res = fn1(this.error)
            reject(res || this.error)
          } catch (err) {
            reject(err)
          }
        })
      }
      // 执行的是reject 的同步状态
      if(this.state === 'rejected') {
        return new MyPromise((resolve, reject) => {
          // 处理函数有返回值
          try {
            const res = fn2(this.error)
            reject(res || this.error)	
          } catch (err) {
            reject(err)
          }
        })
      }
    }
    // catch 相当于then的语法糖，直接调用.then 
    catch (fn) {
      return this.then(null, fn) 
    }

    // 静态resolve 方法
    static resolve (value) {
      return new MyPromise((resolve, reject) => {
        resolve(value)
      })
    }

    /** all 方法，全部成功就是成功 */
    static all(list) {
      const p = new MyPromise((resolve, reject) => {
        const res = []
        // 遍历里面所有的方法        
        list.forEach(p => {
          p.then(d => {
            res.push(d)
            if(list.length === res.length) {
              resolve(res)
            }
          }).catch(err => {
            reject(err)
          })
        })
      }) 
      return p
    }

    /** allSettled 成功或者失败都会返回 */
    static allSettled (list) {
      const p = new MyPromise((resolve)  => {
        let result = []
        list.forEach(fn => {
          fn.then(res => {
            result.push({status: 'fulfilled', value: res})
            if(result.length === list.length) {
              resolve(result)
            }
          }).catch(err => {
            result.push({status: 'rejected', reason: err})
            if(result.length === list.length) {
              resolve(result)
            }
          })
        })
      })
      return p
    }

    /** race 谁先返回，就直接返回 */
    static race (list) {
      const p = new MyPromise((resolve, reject) => {
        let bool = false
        list.forEach(fn => {
          fn.then(res => {
            if(!bool) {
              resolve(res)
              bool = true
            }
          }).catch(err => {
            if(!bool) {
              console.log(err,'err');
              resolve(err)
              bool = true
            }
          })
        })
      })
      return p
    }
}
--jerry
关注
深度剖析 _从经营模式到用户感知，看透淘宝和京东的双11
11-20
深度剖析 _从经营模式到用户感知，看透淘宝和京东的双11
陈超：Spark这一年，从开源到火爆
01-30
自2014年3月份跻身Apache顶级项目（TLP），Spark已然成为ASF最活跃的项目之一，得到了业内广泛的支持——2014年12月发布的Spark1.2版本包含了来自172位Contributor贡献的1000多个commits。2014年的大数据领域，...
350个特性看透ES6
YunWisdom
03-31 251
350个特性看透ES6 介绍 ES6（也称为Harmony，es-nextES2015）是该语言的最新最终定稿规范 该ES6规范是在完成2015年6月，（因此ES2015） 规范的将来版本将遵循该ES[YYYY]模式，例如ES2016 for ES7 年度发布时间表，不会让您失望的功能会影响下一班火车 由于ES6早于该决定，因此我们大多数人仍将其称为ES6。 从ES2016...
微前端学习笔记(4):从微前端到微模块之EMP与hel-micro方案探索
周陆军的博客，分享it技术。
06-06 1019
它允许将一个应用程序的某些模块打包为一个独立的、可远程加载的 bundle，并在运行时动态地加载这些模块。远程模块可以作为微模块（模块级别的微前端），是页面级别的微前端的一种补充，因为页面级别的微前端，如 qiankun、无界等，它们的粒度太粗了，有时候需要更细粒度的微前端，例如：组件、函数级别的。远程模块可以作为微模块（模块级别的微前端），是页面级别的微前端的一种补充，因为页面级别的微前端，如 qiankun、无界等，它们的粒度太粗了，有时候需要更细粒度的微前端，例如：组件、函数级别的。
【综合篇】浏览器的工作原理：浏览器幕后揭秘
程序员哆啦A梦，蓝胖子
01-21 6157
web（给达达前端加星标，提升前端技能）了解浏览器是如何工作的，能够让你站在更高的角度去理解前端浏览器的发展历程的三大路线，第一是应用程序web化，第二是web应用移动化，第三是web操...
【前端大神面考面试官系列】入门Vue全家桶
程序员哆啦A梦，蓝胖子
01-22 2134
（给达达前端加星标，提升前端技能）面试官问：Vue如何安装的呢？达达回答：Vue的安装可以从两个方面进行安装，第一种是CDN引入，第二种是NPM安装。CDN引入<script sr...
记录坎坷的面试
热门推荐
努力努力再努力
02-26 7万+
依图 axios请求封装，处理返回结果的方式(什么403 404什么的怎么处理？)，传入函数参数，this指向 存数据的是时候，本来是以数组的方式从别的地方传来的，但是你存数据的时候怎么存储才能让后续使用更便捷，让代码的复用性等性能更好 事件轮询：宏任务，微任务 数据扁平化，出现最多次数的两个数字 发散性题目： n * n个小格的棋盘，如果用1 * 2的小格去铺，能铺满么？ ->能...
复习要点2021
Ginger0317的博客
05-12 510
1.网址前面的小图标 静态的图标文件使用： 1 <linkrel="shortcut icon" href="1.png" type="image/x-icon" /> 这张图一般放在static目录下。 有一个博客有写http://blog.csdn.net/ssisse/article/details/51705...
如何避开async/await地狱
前端技术小哥
07-30 459
async/await把我们从回调地狱中解放了出来，但是随之而来的是大家对它的滥用，导致了async/await地狱的诞生。 在这篇文章里我将会解释什么是async/await地狱以及分享一些方法去避开它。 什么是async/await地狱？ 当我们在编写JavaScript异步代码的时候，常常会在一个接着一个函数调用前添加await关键字，影响了函数的调用。因为在一般情况下，下一个函数的调用并...
2021/12/16
weixin_43754182的博客
12-17 84
不知道为啥最近都没啥阅读量= = 不过很正常，我写的东西应该只有我自己看得懂。。 关于vue生命周期：https://blog.csdn.net/wangbaobao512/article/details/112848743?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-7.highlightwordscore&dept
前端面试总结
Sasaki51的博客
04-07 288
1. 防抖和节流 什么是防抖和节流，他们的应用场景有哪些？ //防抖第一次立即执行 function debounceImmediate(f, wait){ let timer; let flag = true; return (...args) => { clearTimeout(timer); if (flag) { f(...args); flag = false; }
看透springMvc源代码分析与实践
05-02
这些项目涵盖了从简单CRUD操作到复杂业务逻辑的实现，帮助读者将理论知识转化为实际技能。 通过阅读《看透SpringMVC源代码分析与实践》，读者不仅可以系统地掌握SpringMVC的使用，还能深入理解其底层机制，从而在...
从0设计App（3）：如何用问卷看透人心 (上).pdf
07-22
问卷调查是一种常见的用户调研方式，它可以收集到大量的用户数据，并且可以通过合理的顺序组织，渐进式问到用户的 4 个方向：基础信息、经济能力、行为习惯和心理特征。 在设计问卷时，需要注意顺序的重要性。可以...
淘宝百度腾讯博弈：从镜花水月中看透本质.docx
09-27
然而，这导致百度无法从这部分流量中获利，因此百度随后开始大规模清理淘宝客网站，试图减少淘宝对百度流量的依赖。 淘宝与微信的冲突则体现在电商与社交领域的竞争。淘宝屏蔽微信，是为了避免用户养成在微信平台上...
前端用html写excel文件直接打开
全易
09-10 554
html文件直接用excel打开
[项目][WebServer][日志设计]详细讲解
SnowK博客
09-11 4404
[项目][WebServer][日志设计]详细讲解
前端HTML+CSS+JS的入门学习
m0_59247951的博客
09-10 1473
和</p>，其中<p>是开始标签，表示一个段落的开始，而
​美​团​一​面​
最新发布
qq_43858368的博客
09-14 923
同步代码：按照代码的书写顺序立即执行。异步代码：通过关键字，异步操作会被放入微任务队列中等待执行。事件循环：在同步代码执行完毕后，事件循环会检查并执行微任务队列中的任务。async2script endasync1 end这个顺序反映了JavaScript中同步与异步代码的执行机制以及事件循环的工作原理。定义：HEAD请求是一种HTTP方法，它请求服务器返回与GET请求相同的响应头部，但不返回响应的主体部分。用途：主要用于获取资源的元信息，如文件大小、最后修改时间等，而无需下载整个资源。定义。
一小时看透大学专业pdf
08-02
要在一小时内完全了解一个大学专业的内容是相对困难的，需要有一定的学习能力和速度。然而，可以通过有针对性地阅读相关的PDF文档来获取一个大致的了解。 首先，在阅读之前，应该快速浏览PDF文档的目录和概要，以...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值