Vereinfachen Sie Rückrufe mit Promises

Im Projekt werden verschiedene asynchrone Vorgänge angezeigt. Wenn im Rückruf eines asynchronen Vorgangs asynchrone Vorgänge vorhanden sind, wird eine Rückrufpyramide angezeigt.

Zum Beispiel das Folgende

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

Lassen Sie uns analysieren, wie Promise verwendet wird, um den Code zu vereinfachen

Weil WeChatMiniprogramm Asynchrone APIs gibt es in Form von Erfolg und Misserfolg. Jemand hat eine solche Methode gekapselt:

promisify.js

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

Schauen Sie sich zuerst die einfachste an:

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

    }
})

Verwenden Sie das obige promisify.js zur Vereinfachung:

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

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

})

Okay. Beachten Sie, dass der vereinfachte Rückruf einen Einzug weniger enthält und die Rückruffunktion von 9 Zeilen auf 6 Zeilen reduziert wird.

Der vereinfachte Effekt der Callback-Pyramide

Dann werfen wir einen Blick auf die erste Callback-Pyramide

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

und Sie können sehen, dass die Der Vereinfachungseffekt ist sehr offensichtlich.

gilt auch für Webseiten oder NodeJS usw.

Verwandte Empfehlungen:

Versprechen Sie die gemeinsame Nutzung von vereinfachten Rückrufbeispielen

Ausführliche Erklärung zum WeChat-Applet getUserInfo-Rückruf

Detaillierte Erläuterung der Verwendung der jQuery-Rückrufmethode

Das obige ist der detaillierte Inhalt vonVereinfachen Sie Rückrufe mit Promises. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!