总结学习下来对promise的感悟
特点:一、优化ajax的异步操作,更方便的获取对异步方法执行的结果,并进行的操作,得到执行结果的过程不可逆;二、链式操作,避免了以往js异步时一层套一层的操作,代码逻辑更为清晰。
举例一:
function promiseFun(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
let p = Math.floor(Math.random()*10)
if(p>0){
resolve(p)
} else {
reject('error')
}
},200)
})
}
promiseFun().then(res=>{
console.log(res)
}).catch(error=>{
console.log(error)
})
上文根据随机数p的值,模拟异步操作是否成功,如果成功(p>0),将结果返回至浏览器api---resolve函数中,如果不成功,将错误信息返回至reject函数
举例二:
function promiseFun(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ let p = Math.floor(Math.random()*10) if(p>0){
console.log(p) resolve(p) } else { reject('error') } },200) }) } function promiseFun2(res){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ res *= 10 resolve(res) },200) }) } promiseFun() .then(res=>{ return res }) .then(promiseFun2) .then(res=>{ console.log(res) })
上文示例为链式操作,将第一步resolve的异步操作结果传递至第二部的异步方法里使用
举例三:
function promiseFun(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ let p = Math.floor(Math.random()*10) console.log('p',p) resolve(p) },200) }) } function promiseFun2(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ let j = Math.floor(Math.random()*10) console.log('j',j) resolve(j) },3000) }) } let m = Promise.all([promiseFun(),promiseFun2()]) m.then(res=>{ console.log(res) })
当进行多个promise实例时,promise all可以接受一个数组参数,当所有promise均为完成状态时,返回所有promise的resolve的集合
举例四:
function promiseFun(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ let p = Math.floor(Math.random()*10) resolve(p) },200) }) } function promiseFun2(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ let j = Math.floor(Math.random()*10) resolve(j) },3000) }) } let m = Promise.race([promiseFun(),promiseFun2()]) m.then(res=>{ console.log(res) })
与promise all类似的使用方法,只不过原理是哪个promise先进入resolve谁先把结果then出来,后面的也会执行,但执行结果会被抛弃,所以得到的结果是第一个resolve的结果
备注:promise的then回调属于微任务,优先级大于宏任务(settimeout),因此,当正常任务走一遍后,根据js的事件循环机制EventLoop,先执行微任务promise,再执行settimeout