深入理解JS中的Promise

定义

抽象表达

• promise是JS进行异步编程的新的解决方案

具体表达

• 从语法上来说promise是一个构造函数
• 从功能上来说promise用来封装一个异步操作并获取结果

作用

指定回调函数更加灵活

• 普通回调函数：必须在启动异步任务之前指定
• promise：启动异步任务 > 返回promise对象 > 给promise对象绑定回调函数
• 支持链式调用，解决了回调地狱

Api使用

//产生一个值为1的promise对象
const p1 = new Promise((resolve, reject)=>{
    resolve(1)
})
const p2 = Promise.resolve(2)  //语法糖
const p3 = Promise.reject(3)  //语法糖

const pAll = Promise.all([p1, p2])
pAll.then(
    values => {
        console.log('all onResolved()', values)
    },
    reason => {
        console.log('all onRejected()', reson)
    }
)

关于Promise的几个问题

1、如何改变promise的状态？

• resolve(value)：如果当前是pending就会变为resolved
• reject(reson)：如果当前是pending就会变为rejected

2、一个promise指定多个成功/失败回调函数，都会调用吗？

• 当promise改变为对应状态时都会调用

3、改变promise状态和指定回调函数谁先谁后？

• 都有可能，正常情况下是先指定回调函数再改变状态，但也可以先改变状态再指定回调函数

    如何先改变状态再指定回调函数？

• 在执行器中直接调用resolve()/reject()
• 延迟更长时间调用then()

    什么时候才能得到数据？

• 如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据
• 如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据

4、promise.then返回的新promise的结果状态由什么决定？

简单表达：由then指定的回调函数执行的结果决定

详细表达：

•     如果抛出异常，新promise变成rejected，reason为抛出异常
•     如果返回的是非promise的任意值，新promise变成resolved，value为返回的值
•     如果返回的是另一个新promise，此promise的结果就会成为新promise的结果

5、promise如何串连多个操作任务？

• promise的then()返回一个新的promise，可以开成then()的链式调用
• 通过then()的链式调用串连多个同步/异步任务

new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行任务1(异步)')
        resolve(1)
    }, 1000)
}).then(value => {
    console.log('任务1的结果', value)
    console.log('执行任务2(同步)')
    return 2
}).then(value => {    
    console.log('任务2的结果', value)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('执行任务3(异步)')
            resolve(3)
        }, 1000)
    })
}).then(value => {
    console.log('任务3的结果', value)
})

6、promise异常穿透？

• 当promise使用then链式调用时，可以在最后指定失败的回调
• 前面操作出现了任何异常，都会传到最后失败的回调中处理

new Promise((resolve, reject) => {
    // resolve(1)
    reject(1)
}).then(value => {
    console.log('onRsolved1()', value)
    return 2
}).then(value => {    
    console.log('onRsolved2()', value)
    return 3
    // throw 3
}).then(
    value => {
        console.log('onRsolved3()', value)    
    },
    // reason => Promise.reject(reason)
).catch(reason => {
    console.log('onRejected1()', reason)
})
//then返回的promise只有两种情况会失败，第一种是throw抛异常，另一种是返回一个失败的promise也就是Promise.reject(reson)

7、中断promise链？

• 当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
• 办法：在回调函数中返回一个pending状态的promise对象

new Promise((resolve, reject) => {
    // resolve(1)
    reject(1)
}).then(value => {
    console.log('onRsolved1()', value)
    return 2
}).then(value => {    
    console.log('onRsolved2()', value)
    return 3
}).catch(reason => {
    console.log('onRejected1()', reason)
    // throw reason
    // return Promise.reject(5)
    return new Promise(() => {})
}).then(
    value => {
        console.log('onRsolved3()', value)
    },
    reason => {
        console.log('onRejected2()', reason)
    }
)