// executor 执行器函数,2个参数,执行器函数是同步调用都
function Promise(executor){
// 2个属性
this.promiseState = 'pending'
this.promiseResult = null
//存放then方法的回调函数
this.callback = []
const resolve = (data) => {
if(this.promiseState === 'pending'){
//修改对象的状态
this.promiseState = 'fullfilled' //也叫resolved
//设置对象结果
this.promiseResult = data
//异步执行,同步任务执行完成后才执行,这里用宏任务模拟了(有些问题)
setTimeout(() => {
this.callback.forEach(item => {
//状态改变调用,并将结果传入
item.onResolved(data)
})
})
}
}
const reject = (data)=>{
//该条件表示状态只能从pending变为rejected
if(this.promiseState === 'pending'){
//修改对象的状态
this.promiseState = 'rejected'
//设置对象结果
this.promiseResult = data
//异步执行,同步任务执行完成后才执行,这里用宏任务模拟了(有些问题)
setTimeout(() => {
this.callback.forEach(item => {
//状态改变调用,并将结果传入
item.onRejected(data)
});
})
}
}
// try..catch处理throw异常的情况
try{
executor(resolve,reject)
}catch(e){
//修改promise对象的状态为rejected
reject(e)
}
}
Promise.prototype.then = function(onResolved,onRejected){
//判断回调函数参数,如果不是函数设置默认函数值
if (typeof onResolved !== 'function') {
onResolved = value => value;
}
if (typeof onRejected !== 'function') {
onRejected = reason => {
throw reason;
}
}
//返回一个新的promise实例
return new Promise((resolve,reject) =>{
//type为onResolved||onRejected
const detalCallback = (type) => {
try{
// 获取回调函数的执行结果
let result = type(this.promiseResult)
// 判断类型
//如果是Promise类型的对象将其自身的状态赋予外层的promise,即将回调函数执行的promise值及状态赋值给外部的promise
//也就是最终当前then的返回状态由里面回调中的promise的状态决定
if(result instanceof Promise){
result.then(v=>resolve(v),r=>reject(r))
}else{
resolve(result)
}
}catch(e){
//异常,将状态设置为失败
reject(e)
}
}
//判断promiseState的状态,状态为rejected的时候调用onRejected,为fullfilled的时候调用onResolved
if(this.promiseState === 'fullfilled') {
//then 的执行时机在同步任务执行完成后,这里用宏任务完成(存在问题,promise真实的时微任务)
setTimeout(()=>{
detalCallback(onResolved)
})
}
if(this.promiseState === 'rejected') {
setTimeout(()=> {
detalCallback(onRejected)
})
}
if(this.promiseState === 'pending'){
//异步的时候,pending状态没变,不能调用回调函数,此时将回调函数存入实例对象的属性中,在resolve和reject函数中调用
this.callback.push({
onResolved:() => detalCallback(onResolved),
onRejected:() => detalCallback(onRejected)
})
}
})
}
Promise.prototype.catch = function(onRejected){
//ca tch函数为then函数的特例,第一个参数为undefined或者null
return this.then(undefined,onRejected)
}
//静态方法,直接挂载到构造函数上,将对象等转化为Promise,参数是promise时,返回的是内层promise的状态和结果
Promise.resolve = (value)=>{
// 判断传入的参数是否为promise对象
// 1-如果是promise对象:将其状态和结果赋值给外层的promise
// 2,如果为非promise:状态设置为成功
return new Promise((resolve,reject) => {
if(value instanceof Promise){
value.then(v=>resolve(v),r=>reject(r))
}else{
resolve(value)
}
})
}
//不同于resolve方法,该方法只需要把传入 参数再次传出,并将状态改为失败
Promise.reject = (reason)=>{
return new Promise((resolve,reject)=>{
reject(reason)
})
}
//传入promise数组,
//1.每当遍历结果是成功时,用计数器记录,当计数器当值等于数组长度,则全部成功,返回成功状态
//2.如果当数组中任意一个promise的执行结果是rejected时,直接返回失败的状态
Promise.all = (promises)=>{
return new Promise((resolve,reject) => {
//计数器
let count = 0
//存放结果
let arr = []
for(let i = 0; i < promises.length; i++ ){
promises[i].then(v=>{
count++
arr[i] = v
if(count === promises.length){
resolve(arr)
}
},r=>reject(r))
}
})
}
//谁先执行完就返回谁的结果和状态,参数也是promise组成的数组
Promise.race = (promises)=>{
return new Promise((resolve,reject) => {
for(let i = 0; i < promises; i++){
promises[i].then(v => {
//谁的回调先执行就先返回谁
resolve(v)
},
r=>reject(r))
}
})
}
手写Promise
最新推荐文章于 2024-09-17 13:42:29 发布