Promise simplifie le partage d'exemples de rappel

Cet article partage principalement avec vous l'applet WeChat : utiliser Promise pour simplifier le partage d'instances de rappel, j'espère que cela pourra aider tout le monde.

Comprendre ce qu'est un objet Promise

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

Le suivant analyse comment utiliser Promise pour simplifier le code

Parce que les API asynchrones de l'applet WeChat sont en forme de succès et échoue, tout le monde Encapsule 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 la plus simple :

// 获取系统信息
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=>{

})

Vous pouvez voir qu'il y en a une moins de rappel dans l'indenté simplifié, et la fonction de rappel a été 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)
})

Vous pouvez voir que l'effet de simplification est très évident.

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

Recommandations associées :

Applet WeChat Promise partage d'exemple de rappel simplifié

Analyse d'exemple de promesse en js

Comment utiliser correctement la promesse de 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!