Promise 用法

Promise 对前端开发人员来说并不陌生，可以一起看看Promise 的基础用法及平时不注意的表现

Promise 有三种状态 pending、fullfilled、rejected

then()

const p1 = new Promise((resolve,reject)=>{ 
    resolve('lll')
    // reject('222')
})

// resolve 把 pending 状态 改变为 fullfilled 执行then 的第一个回调函数 打印 111
// resolve 把 pending 状态 改变为 rejected 执行then 的第二个回调函数 打印 222


p1.then((res)=>{console.log(res)},reason=>{console.log(reason)})  

catch()

catch 函数用来 捕捉错误，但是 catch 返回的promise 是 fullfilled 状态 可以再 catch 之后继续 调用then（） （面试的时候可能会用到）

p1.then((res)=>{
    console.log(res)
},reason=>{
    console.log(reason)
}).then(()=>{}).catch((e)=>{
    console.log('err---',e)
}).then((res)=>{
    console.log('catch')   // catch 可以打印出来
})

race() 和 all()

race顾名思义 赛跑的意思，即多个 promise 谁最先执行 resolve就把谁的结果作为race执行结果

all ,即所有的 promse 全部 都 执行了 resolve() 会将结果以数组的方式返回

// Promise.all

const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p2')
    },1000)
})

const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p3')
    },2000)
})

Promise.all([p2,p3]).then((res)=>{
    console.log(res)    // ['p2','p3']
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p2')
    },1000)
})

const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject('p3')
    },2000)
})

Promise.race([p2,p3]).then((res)=>{
    console.log(res)  // 打印： p2
})

下面 尝试自己实现 Promise 及 Promise.all、Promise.race()