28前端成长日记 - Promise

什么是 Promise

Promise 是一个构造函数，它可以获取一个异步操作的最终状态，

Promise实例 一共有三种状态

• pending 代表异步操作未完成
• Fulfiled（resolved） 代表异步操作成功
• rejected 代表异步操作失败

Promise 构造函数的第一参数，接收一个函数，而这个函数是处理 Promise 状态变化的

这个函数的第一个参数是将状态改为 resolved，第二个参数是将状态变更为 rejected

function fn(n){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
           if(n<=10){
           // 如果 n 小于等于 10 就将状态变为 resolved
            resolve('n小于10')
           }else{
           // 如果 n 大于等于 10 就将状态变为 rejected
            reject('n大于于10')
           }
       },1000)
   })
}
fn(11).then((resolve)=>{
    console.log('resolve',resolve)
}).catch((rejected)=>{
    console.log('rejected',rejected)
})

// rejected n大于于10

then()

Promise 的 then 方法可以接受异步操作的状态， then 方法的接收两个函数作为参数，第一个函数是处理 resolved 状态，第二个参数是处理 rejected 状态

then方法也会返回 Promise 对象，所以可以对 then 进行链式操作

catch()

catch 方法与 then 的第二产生作用相同，都是用来处理 rejected 状态的

Promise.all()

Promise.all 方法接收一个 Promise 集合的数组，当所有的的是 Promise 都是 resolved 状态是才会进入到 then 方法，否则进入 catch

function fn(n){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
           if(n<=10){
           // 如果 
            resolve('n小于10')
           }else{
            reject('n大于于10')
           }
       },1000)
   })
}


function fn2(n){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
           if(n<=10){
           // 如果 
            resolve('n小于10')
           }else{
            reject('aa')
           }
       },1000)
   })
}

function fn3(n){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
           if(n<=10){
           // 如果 
            resolve('n小于10')
           }else{
            reject('xx')
           }
       },1000)
   })
}

Promise.all([fn(3),fn2(4),fn3(5)]).then((r)=>{console.log(r)},(e)=>{console.log(e)}).catch((e)=>{console.log(e)})

// ["n小于10", "n小于10", "n小于10"]

Promise.race()

Promise.race 方法的参数也是接收一个 Promise 集合的数组，不同的是它看谁先的到结果，然后去处理它的结果

function fn(n){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
           if(n<=10){
           // 如果 
            resolve('n小于10')
           }else{
            reject('n大于于10')
           }
       },3000)
   })
}


function fn2(n){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
           if(n<=10){
           // 如果 
            resolve('n小于10')
           }else{
            reject('aa')
           }
       },2000)
   })
}

function fn3(n){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
           if(n<=10){
           // 如果 
            resolve('n小于10')
           }else{
            reject('xx')
           }
       },1000)
   })
}

Promise.race([fn(3),fn2(4),fn3(5)]).then((r)=>{console.log(r)},(e)=>{console.log(e)}).catch((e)=>{console.log(e)})

// n小于10

这里 fn3 最快，所以 then 方法处理的 fn3 的结果