Simplifiez les rappels à l'aide de Promises

Dans le projet, diverses opérations asynchrones apparaîtront. S'il y a des opérations asynchrones dans le rappel d'une opération asynchrone, une pyramide de rappel apparaîtra.

Par exemple, le suivant

// 模拟获取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)
    }
})

Analysons comment utiliser Promise pour simplifier le code

Parce que WeChatmini programme Les API asynchrones se présentent sous la forme de succès et d'échecs. Quelqu'un a encapsulé une telle méthode :

promisify.js

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

Regardez d'abord le plus simple :

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

    }
})

Utilisez ce qui précède

pour simplifier :promisify.js

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

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

})

D'accord. Voyez qu'il y a un retrait de moins dans le rappel simplifié et que la fonction de rappel est réduite de 9 lignes à 6 lignes.

L'effet simplifié de la pyramide de rappel

Jetons ensuite un œil à la première pyramide de rappel

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)
})

et vous pouvez voir que le l’effet de simplification est très évident.

est également applicable aux pages web ou nodejs, etc.

Recommandations associées :

Promettre le partage d'un exemple de rappel simplifié

Explication détaillée du rappel de l'applet WeChat getUserInfo

Explication détaillée de l'utilisation de la méthode de rappel jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!