Promise的基本使用

👁 2021-02-18

Promise的基本使用以及需要注意的问题

接下来就了解一下有关Promise的使用

1 什么是Promise

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。

2 为什么使用Promise

指定回调函数的方式更加灵活:
旧的: 必须在启动异步任务前指定
promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定)
支持链式调用, 可以解决回调地狱问题
什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件
回调地狱的缺点? 不便于阅读、不便于异常处理
解决方案? promise链式调用
终极解决方案? async+await

3 Promise基本使用

//创建一个promise对象
    const p = new Promise((resolve,reject)=>{ //执行器函数
        //执行异步操作
        setTimeout(function(){
            const time = Date.now()
            if(time % 2 == 0){
                resolve("成功的数据："+time)
            }else{
                reject("失败的数据："+time)
            }
        },1000)
        //成功了就resolve(value)

        //失败了就reject(reason)
    })
    p.then((value)=>{
        //接受得到成功的数据
        console.log(value)
    },(reason)=>{
        //接受得到失败的数据
        console.log(reason)
    })

4 Promise API使用

const p = new Promise(function(resolve,reject){
        setTimeout(function(){
            const time = Date.now()
            resolve(time)
        },1000)
    })
    // p.then((value)=>{
    //     console.log(value)
    // })
    // .catch((reason)=>{
    //     console.log(reason)
    // })

    const p1 = Promise.resolve(1)   //创建一个成功的携带数据的Promise 
    const p2 = Promise.reject(2)   //创建一个失败的携带数据的Promise 
    // p1.then((value)=>{
    //     console.log(value)
    // })
    // p2.catch((reason)=>{
    //     console.log(reason)
    // })
    //只有都成功了，才会调用成功回调onResolved，只要有一个失败，那就调用onRejected
    const pAll = Promise.all([p,p1,p2])
    pAll.then((value)=>{
        console.log("all onResolved"+value)
    },(reason)=>{
        console.log("all onRejected"+reason)
    })
    //只要p、p1、p2之中有一个实例率先改变状态，pRace的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给pRace的返回值。
    const pRace = Promise.race([p,p1,p2])
    pRace.then((value)=>{
        console.log("race onResolved"+value)
    },(reason)=>{
        console.log("race onRejected"+reason)
    })

5 Promise关键问题

1.promise.then()返回的新promise的结果状态由什么决定?
(1)简单表达:由then()指定的回调函数执行的结果决定
(2)详细表达:
如果抛出异常，新promise变为rejected,reason为抛出的异常
如果返回的是非promise的任意值，新promise变为resolved,value为返回的值
如果返回的是另一个新promise，此promise的结果就会成为新promise的结果
2.promise异常传透?
(1)当使用promise的then链式调用时，可以在最后指定失败的回调
(2)前面任何操作出了异常，都会传到最后失败的回调中处理
3.中断promise链?
(1)当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
(2)办法:在回调函数中返回一个pendding状态的promise对象

new Promise((resolve, reject) => {
    // resolve(1)
    reject(1)
    }).then(
    value => {
        console.log('onResolved1()', value)
        return 2
    },
    // reason => {throw reason}
    ).then(
    value => {
        console.log('onResolved2()', value)
        return 3
    },
    reason => {throw reason}
    ).then(
    value => {
        console.log('onResolved3()', value)
    },
    reason => Promise.reject(reason)
    ).catch(reason => {
        console.log('onReejected1()', reason)
        // throw reason
        // return Promise.reject(reason)
        return new Promise(() => {}) // 返回一个pending的promise  中断promise链
    }).then(
    value => {
        console.log('onResolved3()', value)
    },
    reason => {
        console.log('onReejected2()', reason)
    }
)