Promise之我发现

总结学习下来对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

  

原文地址:https://www.cnblogs.com/akunz/p/13827785.html