class Promise{
static PEDNING = 'pending'
static FULFILLED = 'fulfilled'
static REJECTED = 'rejected'
constructor(executor){
this.status = Promise.PEDNING
this.value = null
this.callbacks = []
try { //try...catch捕获异常,比如console.log(a)这种不存在的变量
executor(this.resolve.bind(this),this.reject.bind(this))
} catch (error) {
this.reject(error)
}
}
resolve(value){
if(this.status === Promise.PEDNING){
this.status = Promise.FULFILLED
this.value = value
this.callbacks.map(callback=>{
setTimeout(()=>{
callback.onFulfilled(value)
})
})
}
}
reject(reason){
if(this.status === Promise.PEDNING){
this.status = Promise.REJECTED
this.value = reason
this.callbacks.map(callback=>{
setTimeout(()=>{ //这里为什么要用定时器?在原生promise中,对then()的两个参数都是异步执行
callback.onRejected(reason)
})
})
}
}
then(onFulfilled,onRejected){ //这两个函数必须是异步执行,在满足对应状态的时候才去执行。
//onFulfilled、onRejected这两个参数不传也可以,只要不报错。所以需要这样做
if(typeof onFulfilled !== 'function'){ //不传这两个参数,为了不报错,就让他们变成空的函数
// onFulfilled = () =>{} //之前的写法
onFulfilled = () => this.value //then()的穿透
}
if(typeof onRejected !== 'function'){
// onRejected = () =>{}
onRejected = () => this.value
}
return new Promise((resolve,reject)=>{
if(this.status === Promise.PEDNING){ //处理PEDNING准备状态
this.callbacks.push({
onFulfilled:value=>{
this.parse(onFulfilled(value),resolve,reject)
// try { //处理onFulfilled()执行过程中的异常,异常交由onRejected()处理。但是后续出现了链式调用,就把onRejected()改成reject()
// //链式操作中,如果onFulfilled()执行过程中出现异常,这个异常交给下一个then()的reject()去处理
// let result = onFulfilled(value)
// if(result instanceof Promise){
// result.then(value=>{
// resolve(value)
// },reason=>{
// reject(reason)
// })
// }else{
// resolve(result)
// }
// } catch (error) {
// reject(error)
// }
},
onRejected:reason=>{
this.parse(onRejected(reason),resolve,reject)
// try {
// let result = onRejected(reason)
// if(result instanceof Promise){
// result.then(value=>{
// resolve(value)
// },reason=>{
// reject(reason)
// })
// }else{
// resolve(result)
// }
// } catch (error) {
// reject(error)
// }
}
})
}
if(this.status === Promise.FULFILLED){
setTimeout(()=>{ //onFulfilled()在promise源码中是异步执行的,所以需要把它的执行放到异步队列中去
this.parse(onFulfilled(this.value),resolve,reject)
// try { //捕获onFulfilled()执行过程中的异常
// let result = onFulfilled(this.value)
// if(result instanceof Promise){
// result.then(value=>{ //promise对象调用then()方法。这里的value不是最开始的value,而是这个返回的新promise对象中的value
// //而且必须在then()内调用resolve()改变状态,直接resolve()没有用,因为value这个值传不出来
// resolve(value)
// },reason=>{
// reject(reason)
// })
// }else{
// resolve(result)//在返回的新promise中调用resolve()去改变状态,状态改变就会执行下一个then()的参数
// }
// } catch (error) {
// reject(error)
// }
})
}
if(this.status === Promise.REJECTED){
setTimeout(()=>{ //onRejected()在promise源码中是异步执行的,所以需要把它的执行放到异步队列中去
this.parse(onRejected(this.value),resolve,reject)
})
}
})
}
parse(result,resolve,reject){ //重复代码抽离
try {
// let result = onRejected(this.value)
if(result instanceof Promise){
result.then(value=>{
resolve(value)
},reason=>{
reject(reason)
})
}else{
resolve(result)
}
} catch (error) {
reject(error)
}
}
static resolve(value){
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
value.then(value=>{
resolve(value)
},reason=>{
reject(reason)
})
}else{
resolve(value)
}
})
}
static reject(reason){
return new Promise((resolve,reject)=>{
reject(reason)
})
}
static all(promises){
let values = []
return new Promise((resolve,reject)=>{
promises.forEach(promise=>{
promise.then(value=>{
values.push(value)
if(values.length === promises.length){ //遍历后values数组的元素数量和promises的数量相等,表明promises内的promise状态都是成功的
resolve(values)
}
},reason=>{
reject(reason)
})
})
})
}
static race(promises){ //多个promise,谁快用谁。当快的那个promise执行改变状态后,后面的promise再执行都不会改变状态。
return new Promise((resolve,reject)=>{
promises.forEach(promise=>{
promise.then(value=>{
resolve(value)
},reason=>{
reject(reason)
})
})
})
}
}
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
// resolve('山东潍坊')
reject('哈哈12')
},1000)
})
.then(val=>{
return new Promise((resolve,reject)=>{ //这个promise的状态决定了外部then()返回的promise的状态
reject('睡得很晚1')
})
},reason=>{
return new Promise((resolve,reject)=>{ //这个promise的状态决定了外部then()返回的promise的状态
reject('睡得很晚2')
})
})
.then(val=>{
console.log(val)
},reason=>{
console.log(reason)
})
//测试静态方法resolve、reject
let pp = new Promise((resolve,reject)=>{
// resolve('成功')
reject('失败')
})
Promise.resolve(pp).then(value=>{
console.log(value)
},reason=>{
console.log(reason)
})
Promise.reject('失败的').then(null,reason=>{
console.log(reason)
})
//测试静态方法all
let p1 = new Promise((resolve,reject)=>{
resolve('成功1')
// reject('失败1')
})
let p2 = new Promise((resolve,reject)=>{
resolve('成功2')
// reject('失败2')
})
Promise.all([p1,p2]).then(value=>{
console.log(value)
},reason=>{
console.log(reason)
})
//测试静态方法race
let p3 = new Promise((resolve,reject)=>{
setTimeout(()=>{
// resolve('成功3')
reject('失败3')
},1000)
})
let p4 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('成功4')
// reject('失败4')
},2000)
})
Promise.race([p3,p4]).then(value=>{
console.log(value)
},reason=>{
console.log(reason)
})
console.log('低价位')
promise中状态通过resolve改变后就不能再通过reject改变了。
then(onFulfilled,onRejected):onFulfilled、onRejected这两个函数必须异步执行。
在链式操作中,第一个Promise中的状态即使是拒绝的,也不会影响下一个then()返回的promise,下一个promise还是成功的,因为两个是不同的promise。
then(onFulfilled,onRejected):onFulfilled()如果返回的是promise对象,那么这个对象的状态决定了这个then()返回的promise的状态,继而决定下一个then(onFulfilled,onRejected)会执行onFulfilled()还是onRejected()。
https://www.bilibili.com/video/BV137411e7KA?p=18