Promise vereinfacht das Teilen von Rückrufbeispielen

In diesem Artikel wird hauptsächlich das WeChat-Applet vorgestellt: Ich hoffe, dass die Verwendung von Promise zur Vereinfachung der Freigabe von Rückrufinstanzen allen helfen kann.

Verstehen Sie, was ein Promise-Objekt ist

In einem Projekt werden verschiedene asynchrone Vorgänge angezeigt. Wenn der Rückruf eines asynchronen Vorgangs asynchrone Vorgänge enthält, 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)
    }
})

Im Folgenden wird analysiert, wie Promise zur Vereinfachung des Codes verwendet wird

Weil die asynchronen APIs des WeChat-Applets erfolgreich sind und scheitern, jeder kapselt eine solche Methode:

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 => {

   }
})
使用上面的promisify.js简化后:
const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)

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

})

Sie können sehen, dass es eine gibt weniger Rückruf im vereinfachten Einzug, und die Rückruffunktion wird von 9 Zeilen auf 6 Zeilen reduziert.

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

Sie sehen, dass der Vereinfachungseffekt sehr offensichtlich ist.

gilt auch für Webseiten oder NodeJS usw.

Verwandte Empfehlungen:

WeChat-Applet Promise vereinfachtes Teilen von Rückrufbeispielen

Promise-Beispielanalyse in js

So verwenden Sie jQuery's Promise richtig

Das obige ist der detaillierte Inhalt vonPromise vereinfacht das Teilen von Rückrufbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!