作为一个前端, 还有人说不会用 Promise,真的就有点过分了. 为了跟上卷的潮流,我们今天就用typeScript 来实现一下 Promise 的实现.
*写 promise 之前我们需要明确一些常识.
- 必须是一个构造函数或是类(我们在使用时必须 new, js中 类实际即时构造函数的语法糖)
- promise 有三个状态 padding(等待) fulfilled(完成) reject(异常)
- promise 状态一旦改变就冻结, 不再发生改变
- 支持链式调用
- 拥有 all, resolve, reject, race 四个静态方法
下面我们开始进入代码块
// 首先promise 有三个状态, 我们先用常量定义一下
const PADDING: string = 'padding' // 等待
const FULFILLED: string = 'fulfilled' // 完成
const REJECT: string = 'reject' // 拒绝
type callbackType = { (val: any): any }
class CustomPromise {
status = PADDING
value: any = ''
reason: any = ''
// 调用 new 关键字时执行
constructor(execute: { (fn1: callbackType, fn2: callbackType): any }) {
execute(this.resolve.bind(this), this.reject.bind(this))
}
resolve(value: any) {
const { status } = this
if (status !== PADDING) return // promise 状态一旦凝固, 将不在发生改变, 所以此处做了判断
this.status = FULFILLED // padding状态改变状态
this.value = value // 将 resolve 值存储起来,在 then 回调时使用
}
// 同 resolve
reject(reason: any) {
const { status } = this
if (status !== PADDING) return
this.status = REJECT
this.reason = reason
}
// promise 使用 then 接受两个回调函数
then(fulCallback: callbackType, failCallback?: callbackType) {
const { status, value, reason } = this
if (status === FULFILLED) {
fulCallback(value) // 通过 callback 在回调函数里再获取 value 值
}
// 同 resolve
if (status === REJECT) {
failCallback!(reason)
}
}
}
以上我们就实现了一个很简单的 Promise, 这个 Promise 很弱, 只能执行同步代码😭, 也不支持链式调用.显然这样肯定不行的, 大家都知道, Promise的提出就是为了解决异步回调地狱问题, 下面我们就来加入异步的处理.
*异步处理我们大致解决方案是
- 首先在 then 判断 Promise 状态, 如果是 padding, 说明 promise 异步了
- 确定异步了,resolve肯定是迟于 then 执行了, 所以我们将 then 回调放到一个队列里存起来, 当 promise 状态发生变更时,再去调用 .then回调,这样我们就解决了异步回调问题
- 以下代码请参照① ② 循序查看
const PADDING: string = 'padding' // 等待
const FULFILLED: string = 'fulfilled' // 完成
const REJECT: string = 'reject' // 拒绝
type callbackType = { (val: any): any }
class CustomPromise {
status = PADDING
value: any = ''
reason: any = ''
+ fulCallbackList: Function[] = []
+ failCallbackList: Function[] = []
// 调用 new 关键字时执行
constructor(execute: { (fn1: callbackType, fn2: callbackType): any }) {
execute(this.resolve.bind(this), this.reject.bind(this))
}
resolve(value: any) {
const { status, fulCallbackList } = this
if (status !== PADDING) return // promise 状态一旦凝固, 将不在发生改变, 所以此处做了判断
this.status = FULFILLED // padding状态改变状态
this.value = value // 将 resolve 值存储起来,在 then 回调时使用
// ② 如果异步了, fulCallbackList 队列存放的就是.then 的回调函数
+ fulCallbackList.forEach(fn => fn())
}
// 同 resolve
reject(reason: any) {
const { status, failCallbackList } = this
if (status !== PADDING) return
this.status = REJECT
this.reason = reason
+ failCallbackList.forEach(fn => fn())
}
// promise 使用 then 接受两个回调函数
then(fulCallback: callbackType, failCallback?: callbackType) {
const { status, value, reason } = this
if (status === FULFILLED) {
fulCallback(value) // 通过 callback 在回调函数里再获取 value 值
}
// 同 resolve
if (status === REJECT) {
failCallback!(reason)
}
// ① 异步处理
+ if (status === PADDING) { // 将回调函数放到队列里,在状态发生改变时再调用
+ this.fulCallbackList.push(() => {
+ fulCallback(value)
+ })
+ this.failCallbackList.push(() => {
+ failCallback!(reason)
+ })
+ }
}
}
*以上我们解决了异步问题.今天更新到此为止, 下面有时间再更新一下 .then 的链式调用
