Promise入门/面试必看
一、理解
1、抽象表达
是JS中进行异步编程的新的解决方案(旧->纯回调函数)
2、具体表达
(1)语法上:Promise是一个构造函数
(2)功能上:Promise对象用来封装一个异步操作并可以获取其结果
二、状态的改变
1、pending(未确定)-> resolved(成功)
(1)resolve(value)
2、pending(未确定) -> rejected(失败)
(1)reject(reason)
(2)throw new Error(error)
三、基本使用
//(1)创建一个新的Promise对象 const p = new Promise((resolve,reject)=>{//执行器函数 同步回调 //(2)执行异步操作任务 setTimeout(()=>{ const time = Date.now()//获取当前时间 if(time %2 ==0){ //偶数代表成功 resolve("成功了,time = "+ time) }else{ //否则失败 reject("失败了,time = "+ time) } },1000); }) p.then( value =>{//接收成功的数据 console.log("成功的回调:" + value) }, reason =>{//接受失败的数据 console.log("失败的回调:" + reason) } )
四、为什么要使用Promise
1、指定回调函数的方式更灵活
(1)旧的必须在启动异步任务之前指定回调函数
(2)promise:启动异步任务->返回promise对象->给promise对象绑定回调函数
2、支持链式调用,可以解决回调地狱
(1)回调地狱:回调函数嵌套调用->不便于阅读/不便于异常处理
(2)解决方案:promise链式调用
(3)终极解决方案:async、await
五、all()和race()
1、all()
const p1 = new Promise((resolve,reject)=>{ resolve(1) }) const p2 = Promise.resolve(2) const p4 = Promise.reject(4) const pAll = Promise.all([p1,p2,p3,p4]) const pAll2 = Promise.all([p1,p2]) pAll.then( values => { console.log('all onResolved()',values) }, reason => { console.log('all onrejected()',reason) } ) pAll2.then( values => { console.log('all2 onResolved()',values) }, reason => { console.log('all2 onrejected()',reason) } ) //运行结果 //all onReasoned() 3 返回第一个失败的reason //all2 onrejected() [1, 2] 全部成功时返回成功的value集合
2、race()
const pRace = Promise.race([p1,p2,p3]) const pRace2 = Promise.race([p3,p1,p2]) pRace.then( value => { console.log('race onResolved()',value) }, reason => { console.log('race onrejected()',reason) } ) pRace2.then( value => { console.log('race2 onResolved()',value) }, reason => { console.log('race2 onrejected()',reason) } ) //运行结果 //返回第一个执行的结果,根据实际执行时间 //race onResolved() 1 //race2 onrejected() 3
六、注意点
1、一个promise可以指定多个成功/失败回调函数,可以执行多个不同操作。
2、promise可以串连多个操作任务
(1)通过then()返回一个新的promise,可以开成then()的链式调用
(2)通过then的链式调用可以串连多个同步/异步任务
3、promise的异常传透
(1)使用promise的then()链式调用时,可以在最后指定失败的回调(catch)
(2)前面的任何操作出了异常,都会传到最后失败的回调中处理(reason => {throw reason} 、reason=> Promise.reject()reason)
4、中断promise链
(1)使用promise的then()链式调用时,想要中止调用,使链式调用结束
(2)方法:return new Promise(()=>{}) //返回一个pending状态的promise