Simplify callbacks using Promises

In the project, various asynchronous operations will appear. If there are asynchronous operations in the callback of an asynchronous operation, a callback pyramid will appear.

For example, the following one

// 模拟获取code，然后将code传给后台，成功后获取userinfo，再将userinfo传给后台
// 登录
wx.login({
    success: res => {
        let code = res.code
        // 请求
        imitationPost({
            url: '/test/loginWithCode',
            data: {
                code
            },
            success: data => {
                // 获取userInfo
                wx.getUserInfo({
                    success: res => {
                        let userInfo = res.userInfo
                        // 请求
                        imitationPost({
                            url: '/test/saveUserInfo',
                            data: {
                                userInfo
                            },
                            success: data => {
                                console.log(data)
                            },
                            fail: res => {
                                console.log(res)
                            }
                        })
                    },
                    fail: res => {
                        console.log(res)
                    }
                })
            },
            fail: res => {
                console.log(res)
            }
        })
    },
    fail: res => {
        console.log(res)
    }
})

Let’s analyze how to use Promise to simplify the code

Because of WeChatsmall programasynchronous api They are all in the form of success and failure. Someone has encapsulated such a method:

promisify.js

module.exports = (api) => {
    return (options, ...params) => {
        return new Promise((resolve, reject) => {
            api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
        });
    }
}

Let’s look at the simplest one first:

// 获取系统信息
wx.getSystemInfo({
    success: res => {
        // success
        console.log(res)
    },
    fail: res => {

    }
})

Use the above promisify.js after simplification:

const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)

getSystemInfo().then(res=>{
    // success
    console.log(res)
}).catch(res=>{

})

You can see There is one less indent in the simplified callback, and the callback function is reduced from 9 lines to 6 lines.

Simplified effect of the callback pyramid

Then let’s take a look at the first callback pyramid

const promisify = require('./promisify')
const login = promisify(wx.login)
const getSystemInfo = promisify(wx.getSystemInfo)

// 登录
login().then(res => {
    let code = res.code
    // 请求
    pImitationPost({
        url: '/test/loginWithCode',
        data: {
            code
        },
    }).then(data => {
        // 获取userInfo
        getUserInfo().then(res => {
            let userInfo = res.userInfo
            // 请求
            pImitationPost({
                url: '/test/saveUserInfo',
                data: {
                    userInfo
                },
            }).then(data => {
                console.log(data)
            }).catch(res => {
                console.log(res)
            })
        }).catch(res => {
            console.log(res)
        })
    }).catch(res => {
        console.log(res)
    })
}).catch(res => {
    console.log(res)
})

You can see that the simplification effect is very obvious.

The same applies to web pages or nodejs, etc.

Related recommendations:

Promise simplified callback example sharing

WeChat applet getUserInfo callback detailed explanation

Detailed explanation on the use of jQuery callback method

The above is the detailed content of Simplify callbacks using Promises. For more information, please follow other related articles on the PHP Chinese website!