前言
Promise 是异步编程的一种解决方案,比传统的解决方案 —— 回调函数和事件(地狱回调)更加合理
所谓 Promise 简单说就是一个容器,里面保存着未来才会结束的事件结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息
系列会由浅入深,带大家一步步动手实现一个自己的 Promise,相信大家跟着一起做完,不管是平时工作中对 Promise 的应用,还是面试时对 Promise 相关问题的回答,都会更加的得心应手,废话不多,现在就来一起开始吧
Promise 类的声明
首先我们先从最简单的部分开始,声明一个自己的 Promise 类 MyPromise ,拥有 promise 基本的 3 个状态:pending,fulfilled,rejected(默认pending) ,然后包含我们平时经常使用到的功能 接收一个回调函数 callBack ,里面有 resolve,reject 方法来处理结果即可
class MyPromise { static pending = 'pending' static fulfilled = 'fulfilled' static rejected = 'rejected' constructor (callBack) { this.state = MyPromise.pending this.result = null this.error = null const resolve = (res) => { this.result = res } const reject = (error) => { this.error = error } callBack(resolve, reject) console.log('result:' + this.result) console.log('error:' + this.error) } } new MyPromise((resolve, reject) => { resolve(1) reject(2) }) 复制代码
好了,这样一个简单 Promise 类的结构就有了,我们来运行一下
一切正常,可以接收到数据,但是不是感觉有点怪怪的,就是状态还没改过来,按 Promise 的规定它只能存在一种状态,并且fulfilled和rejected只能通过pending状态转换过去,而我们的类把 fulfilled和rejected 两种状态都处理了,显然是不符合要求的,现在我们把状态和根据状态处理结果的逻辑加上
class MyPromise { static pending = 'pending' static fulfilled = 'fulfilled' static rejected = 'rejected' constructor (callBack) { this.state = MyPromise.pending this.result = null this.error = null const resolve = (res) => { if (this.state === MyPromise.pending) { this.state = MyPromise.fulfilled this.result = res } } const reject = (error) => { if (this.state === MyPromise.pending) { this.state = MyPromise.rejected this.error = error } } callBack(resolve, reject) console.log('result:' + this.result) console.log('error:' + this.error) } } new MyPromise((resolve, reject) => { resolve(1) reject(2) }) 复制代码
这时运行下代码,我们的状态转化关系和结果处理就正常了
好了,本篇到此已经实现了一个简单 promise 的状态转化和结果处理,下一篇我会带着大家一起实现 promise 的 then 方法,敬请关注!