一、编写一个基础版本的promise
class Promises {
constructor(fn) {
fn(this.resolve, this.reject)
}
status = 'pending'
value = undefined
err = undefined
successCb = undefined
failCb = undefined
resolve = value => {
if (this.status !== 'pending') {
return
}
this.status = 'fulfilled'
this.value = value
this.successCb && this.successCb(value)
}
reject = err => {
if (this.status !== 'pending') {
return
}
this.status = 'rejected'
this.err = err
this.failCb && this.failCb(err)
}
then(successCb, failCb) {
if (this.status === 'fulfilled') {
successCb(this.value)
} else if (this.status === 'rejected') {
failCb(this.err)
} else {
this.successCb = successCb
this.failCb = failCb
}
}
}
let promise = new Promises((resolve, reject) => {
resolve('成功')
reject('失败')
})
promise.then(v => {
console.log(v)
}, e => {
console.log(e)
})
二、编写步骤分解介绍
* 1.Promise 就是一个类,在执行这个类的时候,需要传递一个执行器进去,执行器会立即执行
* 2.Promise中有三种状态:成功fulfilled 失败rejected 等待pending
* pending -> fulfilled 调用:resolve
* pending -> rejected 调用:reject
* 一旦状态确定就不可更改
* 3. then方法内部做的事就是判断状态,如果成功,调用成功的回调函数,如果失败,调用失败的回调函数,then方法被定义在原型对象中的
* 4. then成功回调有一个参数,表示成功之后的值,then失败回调有一个参数,表示失败后的原因
* 5. 去保存回调函数,在实现promise中的异步处理,在处理完调用回调
* 6. 实现then方法多次调用
* 7. 实现then方法的链式调用
* 8. 处理then方法中Promise对象自返回
* 9. 增加异常捕获及then方法中执行发生异常抛出
* 10.将then方法的参数变成可选参数
* 11.promise中的all方法
* 12.promise中的resolve方法
* 13.promise中的reject方法
* 14.promise中的finally方法
* 无论当前promise的状态是成功的还是失败的,finally方法中的回调函数始终都会被执行一次
* 在finally方法的后面我们可以链式调用then方法来拿到当前这个promise对象最终返回的结果
* 15.promise中的catch方法
三、完整版本promise代码及注释
// 定义状态,因为要频繁的使用,所以定义成常量,在使用常量,编辑器是有提示
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
constructor (fn) { // 接收一个执行器,立即执行,也就是new promise传入的函数
try { // 捕获执行器中的异常错误
fn(this.resolve, this.reject)
} catch (e) {
this.reject(e)
}
}
// 在使用promise是resolve和reject是直接调用的,如果是一个普通函数this是window或undefined,所以将resolve定义为箭头函数,就是使里面的this指向的是这个类的实例对象
status = PENDING // promise状态,默认:pending
// 将成功和失败后的值定义成实例属性
value = undefined // 定义成功后的值
reason = undefined // 定义失败后的值
successCb = [] // 成功回调
failCb = [] // 失败回调
resolve = value => { // 定义resolve,更改状态fulfilled
// 如果状态不是等待,阻止程序向下执行
if (this.status !== PENDING) return
// 将状态更改为成功
this.status = FULFILLED
// 因为要在then方法中使用,所以要保存成功之后的值
this.value = value
// 判断成功回调是否存在,如果存在就调用
// this.successCb && this.successCb(this.value)
// 数组shift方法会删除原数组第一个元素,它的返回值就是一个元素,所以直接调用,直到successCb数组中为空
while(this.successCb.length) this.successCb.shift()()
}
reject = reason => { // 定义reject,更改状态rejected
// 如果状态不是等待,阻止程序向下执行
if (this.status !== PENDING) return
// 将状态更改为失败
this.status = REJECTED
// 保存失败之后的原因
this.reason = reason
// 判断失败回调是否存在,如果存在就调用
// this.failCb && this.failCb(this.reason)
// 数组shift方法会删除原数组第一个元素,它的返回值就是一个元素,所以直接调用,直到failCb数组中为空
while(this.failCb.length) this.failCb.shift()()
}
// 在原型上挂then方法
then (successCb, failCb) {
// 实现链式调用,返回一个新的promise
successCb = successCb ? successCb : value => value // 将then方法的参数变成可选参数, 如果有就使用传递的,没有就去返回一个 value => value
failCb = failCb ? failCb : reason => { throw reason } // 处理失败回调
let promsie2 = new MyPromise((resolve, reject) => {
// 判断状态
if (this.status === FULFILLED) {
setTimeout(() => { // 将这儿变成异步代码,这样才可以拿到promise2
// then方法中执行发生异常抛出
try {
let x = successCb(this.value)
handleResolve(x, promsie2, resolve, reject)
} catch (e) {
reject(e) // 如果发生错误就传递到下一个promise中的rejected
}
}, 0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = failCb(this.reason)
handleResolve(x, promsie2, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else {
// 等待(处理异步)
// 将成功和失败回调存储起来
this.successCb.push(() => {
setTimeout(() => {
try {
let x = successCb(this.value)
handleResolve(x, promsie2, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
})
this.failCb.push(() => {
setTimeout(() => {
try {
let x = failCb(this.reason)
handleResolve(x, promsie2, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
})
}
})
return promsie2
}
// 定义静态all方法
static all (array) {
let result = [] // 定义返回的结果数组
let index = 0 // 用来控制是否执行完成,涉及一些异步处理
/**
* 判断数组中事普通值还是promise对象
* if是普通值直接放入结果数组当中
* if是promise对象就去执行,然后再将promise中的结果放入result中
*/
return new MyPromise((resolve, reject) => {
// 用来添加结果的函数
function addData (key, value) {
result[key] = value
// 等待异步处理全部完成resolve
index++
if (index === array.length) {
resolve(result) // 将处理完的结果返回
}
}
for (let i = 0; i < array.length; i++) {
let current = array[i]
if (current instanceof MyPromise) {
// promise对象
current.then(value => addData(i, value), reason => {
reject(reason)
})
} else {
// 普通值,添加结果
addData(i, current)
}
}
})
}
// 定义race方法
static race(promises) {
return new MyPromise((resolve, reject) => {
if (promises.length === 0) {
return
} else {
for (let p of promises) {
MyPromise.resolve(p).then(value => {
resolve(value)
}, reason => {
reject(reason)
})
}
}
})
}
/**
* 定义resolve方法
* 判断传入的参数是否是promise对象,直接返回该promise
* 如果不是promise对象,就去创建一个promise对象,把给定的值包裹在promise对象当中,然后将这个promise返回
*/
static resolve (value) {
if (value instanceof MyPromise) return value // 如果是promise直接返回
// 如果是一个值
return new MyPromise(resolve => resolve(value)) // 用promise包裹
}
// 定义reject方法
static reject (value) {
if (value instanceof MyPromise) return value // 如果是promise直接返回
// 如果是一个值
return new MyPromise((resolve, reject) => reject(value)) // 用promise包裹
}
/**
* 定义finally方法
* 首先finall方法不是一个静态方法,这个方法是要被定义在promise类的原型对象上
*
*/
finally (callback) {
// 得到当前promise的状态
return this.then(value => {
// 这个要处理异步执行
return MyPromise.resolve(callback()).then(() => value)
/**
* 这种写法未处理异步执行
* callback()
* return value // 只有return后下一个then方法才可以拿到这个value
*/
}, reason => {
return MyPromise.resolve(callback()).then(() => {throw reason})
// callback()
// throw reason // 如果失败了,将reason传递下去
})
}
// 定义catch方法
catch (failCb) {
return this.then(undefined, failCb)
}
}
封装then返回数据判断函数
/**
* 判断x的值是普通值还是promise对象
* if普通值,直接调用resolve
* if是promise对象,查看promise对象返回的结果
* 再根据promise对象返回的结果,决定调用resolve还是调用reject
* 定义一个函数用来做这些事handleResolve
* 如果x返回的promise和promise相等时,就产生了promise自调用
*/
function handleResolve (x, promsie2, resolve, reject) {
if (x === promsie2) {
return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
if (x instanceof MyPromise) {
// promise 对象
x.then(resolve, reject)
} else {
// 普通值
resolve(x)
}
}