promise

promise

1、定义

promise是ES6引入的异步编程新的解决方案 从语法上来说它是一个构造函数，可以实例化对象，封装异步操作，获取成功或失败的结果 其优点是：支持链式调用，可以解决回调地狱问题、指定回调的方式更为灵活

2、形式

const p = new Promise((resolve,reject)=>{
	setTimeout(()=>{
		let n =rand(1,100)
		if(n<=30 && n>=1){
			resolve(n)
		}
		else{
			reject(n)
		}
	},1000)
})
p.then((value)=>{
    alert('恭喜中奖啦,你的中奖号码为:',+value)
},(reason)=>{
    alert('再接再厉，你的号码为:'+reason)
})

3、promise的状态

1、promise的状态:实例对象的一个属性：PromiseState
2、promise三个状态：pending（未决定的）、resolved/fullfilled(成功)、rejected(失败)
3、pending 变为resolved 或者 pending 变为rejected ，只有这两种，而且属性值只能改变一次
4、而且实例对象的属性值：PromiseState是内置，不能直接改变的

4、promise的结构：

5、promise对象的另一个属性：PromiseResult

1、保存着对象【成功/失败】的结果 （resolve,reject)

6、promise的基本工作流程：

7、promise的构造函数：

promise的构造函数promise(excutor){}
executor函数：执行器(resolve,reject)=>{}
executor函数会在promise内部立即同步调用，异步操作在执行器中执行

8、Promise.resolve()

Promise.resolve(value=>{}) 返回一个成功/失败的promise对象
value；可以是一个值或者一个promise对象

//如果传入的参数为非promise类型的对象，则返回结果为成功promise对象
//如果传入的参数为promise对象，则参数结果决定了resolve的结果
let p1=Promise.resolve(123)
console.log(p1)//promise对象
let p2=Promise.resolve(new Promise(resolve,reject)=>{
    resolve('ok')
})
console.log(p2)

9、Promise.reject()

promise.reject(value=>{}) 返回失败的promise对象，无论传入的value是什么，返回都是失败，并且输入的值即为失败的结果（PromiseResult)

10、Promise.all([])

Promise.all([]) 输入参数为一个promise对象数组，返回结果为一个promise对象，只有数组中所有promise对象都成功时，返回promise的状态才为fullfilled,即为成功

eg:

let p1=new Promise((resolve,reject)=>{
    reject('test11')
})
let p2=new Promise((resolve,reject)=>{

    reject('test22')
})
let p3=Promise.resolve(123)
//!!!
let last=Promise.all([p2,p1,p3])
last.then((value)=>{
    console.log(value)
}).catch((errr)=>{
    console.log(errr)
})
//打印结果：test22

let p1=new Promise((resolve,reject)=>{
    reject('test11')
})
let p2=new Promise((resolve,reject)=>{

    reject('test22')
})
let p3=Promise.resolve(123)
//!!!
let last=Promise.all([p1,p2,p3])
last.then((value)=>{
    console.log(value)
}).catch((errr)=>{
    console.log(errr)
})
//打印结果：test11

上面两个代码可知，当数组中的promise有执行失败的，就会直接走promise.all的失败路线，而且只会返回第一次遇到失败的promise失败状态。

11、Promise.race([])

返回一个新的promise,第一个完成promise的结果状态就是最终的结果状态

12、promise的异常穿透

promise链式调用的时候，不需要每一个都使用catch接受异常状态，只需要在最后使用一个catch接受

13、中断promise链

在链式调用的时候，返回一个空的promise对象，这样由于返回promise对象的状态为pending,所以不会执行then或者catch函数，很秒！！

let p4=new Promise((resolve,reject)=>{
    resolve('111')
})
p4.then(value=>{
    console.log(222)
    //!!!
    return new Promise(()=>{})
}).then(value=>{
    console.log(333)
}).then(value=>{
    console.log(444)
})

14、手写promise

/*
 * @Author: 
 * @Date: 2024-05-19 14:03:53
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-19 15:20:37
 * @Description: 
 */
function Promise(executor){
    this.PromiseState='pending'
    this.PromiseResult=null
    this.callbacks=[]
    const self=this
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return 
        //修改对象的状态（promiseState)
        self.PromiseState='fulfilled'
        //修改对象结果值（promiseResult)
        self.PromiseResult=data
        self.callbacks.forEach(item=>{
            item.onResolved(data)
        })
    }
    function reject(data){
        if(self.PromiseState !== 'pending') return 
        //修改对象的状态（promiseState)
        self.PromiseState='rejected'
        //修改对象结果值（promiseResult)
        self.PromiseResult=data
        self.callbacks.forEach(item=>{
            item.onRejected(data)
        })
    }
    try{
        //同步调用【执行器函数】
        executor(resolve,reject);
    }catch(e){
        reject(e)
    }
    
}
Promise.prototype.then=function(onResolved,onRejected){
    const self=this
    if(typeof onRejected !=='function'){
        onRejected =reason =>{
            throw reason
        }
    }
    if(typeof onResolved !=='function'){
        onResolved =reason =>{
            return reason
        }
    }
    return new Promise((resolve,reject)=>{
        function callback(type){
            try{
                let result=type(self.PromiseResult)
                if(result instanceof Promise){
                    result.then(v=>{
                        resolve(v)
                    },r=>{
                        reject(r)
                    })
                }else{
                    resolve(result)
                }
            }catch(e){
                reject(e)
            }
        }
        if(this.PromiseState==='fulfilled'){
            callback(onResolved)
        }
        if(this.PromiseState==='rejected'){
            callback(onRejected)
        }
        if(this.PromiseState==='pending'){
            this.callbacks.push({
                onResolved:function(){
                    callback(onResolved)
                },
                onRejected:function(){
                    callback(onRejected)
                }
            })
        }
    })
    
    
}
Promise.prototype.catch=function(onRejected){
    return this.then(undefined,onRejected)
}
Promise.prototype.resolve=function(value){
    return new Promise((resolve,reject)=>{
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v)
            },r=>{
                reject(r)
            })
        }
        else{
            resolve(value)
        }
    })
}
Promise.prototype.reject=function(reason){
    return new Promise((resolve,reject)=>{
        reject(reason)
    })
}
Promise.prototype.resolve=function(value){
    return new Promise((resolve,reject)=>{
        if(value instanceof Promise){
            value.then(v=>{
    			resolve(v)
            },r=>{
                reject(r)
            })
        }
        else{
            resolve(value)
        }
    })
}
Promise.prototype.reject=function(reason){
    return new Promise((resolve,reject)=>{
        reject(reason)
    })
}