promise

参考 https://es6.ruanyifeng.com/?search=promise&x=0&y=0#docs/promise#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95

简介

• Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。
• 可以将异步操作以同步操作的流程表达出来
• 用Promise来处理异步api请求，可以避免回调地狱。

promise三种状态

• pending（进行中）
• fulfilled（已成功）
• rejected（已失败）

promise状态改变只有两种

• pending（进行中）-> fulfilled（已成功）
• pending（进行中）-> rejected（已失败）

promiseSuccess = Promise.resolve('返回成功的promise对象')
promiseErr = Promise.reject('返回失败的promise对象')

promiseSuccess
.then(res => {
    console.log('捕获成功信息', res)
})
.catch(err => {
    console.log('捕获错误信息', err)
})
.finally(() => {
    console.log('状态如何都会返回')
})

promiseErr
.then(res => {
    console.log('捕获成功信息', res)
})
.catch(err => {
    console.log('捕获错误信息', err)
})
.finally(() => {
    console.log('状态如何都会返回')
})

// Promise的构造函数接收一个函数类型参数
// 并且传入两个参数：resolve，reject，
// 分别代表异步操作执行成功/失败后的回调函数
new Promise((resolve, reject) => {
    
})

使用实例

// 再uniapp中。
// bargainData，initiateId是data中的数据。
// 例如有一个方法调用api接口（apiBargainShareDetail）（该接口支持axios或者promise）获取后台数据
bargainShareDetail() {
    apiBargainShareDetail({
        initiate_id: this.initiateId,
    })
    .then(res => {
        this.bargainData = res
    })
    .catch(err => {
        console.log(err)
    })
}

// 然后想再onLoad中调用bargainShareDetail，
// 并对获取到的数据bargainData进行打印或者其他操作
// 此时是拿不到的。
// 因为再onLoad中代码从上到下执行的，this.bargainShareDetail()被掉用了，但是没有执行完毕就执行了console.log(this.bargainData)，很大概率拿不到，打印出underfunded。
onLoad() {
    this.bargainShareDetail()
    console.log(this.bargainData)
}

• 然后可以这样改写

// 让bargainShareDetail()返回promise对象.
bargainShareDetail() {
    return new Promise((resolve, reject) => { // *
        apiBargainShareDetail({
                initiate_id: this.initiateId,
            })
            .then(res => {
                this.bargainData = res
                this.config.image = this.bargainData.goods_image
                resolve(res) // *
            })
            .catch(err => {
                console.log(err)
                reject(err) // *
            })
    })
},
// 再调用到该方法时可以进行链式调用.then()/.catch()，就能确保执行完毕再处理bargainData数据。
// 或者使用async/await关键字

// .then()/.catch()
onLoad() {
    try {
        this.bargainShareDetail()
        .then(res => { // *
            console.log(this.bargainData)
        })
    }catch(err) {
        console.log(err)
    } 
}
// async/await
async onLoad() { // *
    try {
        await this.bargainShareDetail() // *
        console.log(this.bargainData)
    }catch(err) {
        console.log(err)
    }  
}