es6基础0x023:Promise

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了es6基础0x023:Promise脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

0x000 概述

Promise是一个异步编程的解决方案,他经常和ajax一起出现,导致很多人以为Promise是一种新的网络请求技,其实不然。Promise是一种思考方式、编程方式

0x000 栗子

先写一个栗子

setTimeout(()=>{
    console.log('here')
},3000)

简单,3s之后将会打印出here,现在换成Promise

new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    console.log('here')
})

执行结果也是一样,3s之后将会输出here,还可以这么写

let PRoxy=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})

setTimeout(()=>{
    proxy.then(()=>{
        console.log('here')
    })
}, 10000)

13s后才输出here

0x002 初始化

  • 语法

    new Promise(executor)
    • 参数:

      • executor:处理器函数,函数的完整签名是(resolve, reject)=>{}
    • 返回值:一个Promise实例
  • 栗子

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()
        }, 3000)
    })
    console.log(promise) // Promise {<PEnding>}
  • 说明:
    使用new Promise实例化一个Promise之后,将它输出出来,可以看到他有一个pending,这是说明这个promise的状态,称为Promisestatuspromise一共有3种状态,一个promise必定处于下面三个状态之一:

    • pending:初始状态
    • fulfilled:操作成功
    • rejected:操作失败

0x003 then

  • 语法:

    promise.then(onFulfilled, onRejected)
    • onFulfilled:操作成功的回调
    • onRejected:操作失败的回调
  • 栗子1:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()
        }, 3000)
    })
    console.log(promise) // Promise {<pending>}
    promise.then(()=>{
        console.log(promise) // Promise {<resolved>: undefined}
    })
  • 说明1:
    当调用resolve之后,then函数执行了,同时promisePromiseStatus变成了resolvedonFulfilled同时接受一个变量,称之为PromiseValue

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(1)
        }, 3000)
    })
    promise.then((value)=>{
        console.log(value) // 1
    })
  • 栗子2:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            reject()
        }, 3000)
    })
    console.log(promise) // Promise {<pending>}
    promise.then(()=>{},()=>{
        console.log(promise) // Promise {<rejected>: undefined}
    })

    当调用reject之后,then执行了,此时promisePromiseStatus变成了rejected,同时,onRejected回调接受一个reason,作为操作失败的原因说明:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            reject('nothing')
        }, 3000)
    })
    promise.then(()=>{},(reason)=>{
        console.log(reason) // nothing
    })

0x004 catch

  • 语法:

    promise.catch(onRejected)
    • onRejected:回调
  • 栗子:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()
        }, 3000)
    }).then(()=>{
        throw 'error'
    }).catch((e)=>{
        console.log(`i catch you: ${e}`) // i catch you error 
    })
  • 注意1:在异中的错误不会执行catch

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            throw 'error'
        }, 3000)
    }).catch((e)=>{
        console.log(`i catch you: ${e}`) // Uncaught error 
    })
  • 注意2:resolve之后会被忽略

     let promise=new Promise((resolve, reject)=>{
        resolve()
        throw 'error'
    }).catch((e)=>{
        console.log(`i catch you: ${e}`)  // 不会输出
    }) 
    

0x005 finally

  • 语法:

    p.finally(onFinally)
  • 栗子:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()
        }, 3000)
    }).then(()=>{
        console.log('resolve')
        throw 'error'
    }).catch((e)=>{
        console.log(`i catch you: ${e}`)
    }).finally(()=>{
        console.log('finally')
    })
    // resolve
    // i catch you error
    // finally

脚本宝典总结

以上是脚本宝典为你收集整理的es6基础0x023:Promise全部内容,希望文章能够帮你解决es6基础0x023:Promise所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。