Promise simplifies callback example sharing-JS Tutorial-php.cn

Promise simplifies callback example sharing

小云云

Release： 2018-02-07 15:36:45

Original

1436 people have browsed it

This article mainly shares with you the WeChat applet: using Promise to simplify callback instance sharing, I hope it can help everyone.

Understand what a Promise object is

In a 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

// 模拟获取code，然后将code传给后台，成功后获取userinfo，再将userinfo传给后台
// 登录
wx.login({
    success: res => {
        let code = res.code
        // 请求
        imitationPost({
            url: &#39;/test/loginWithCode&#39;,
            data: {
                code
            },
            success: data => {
                // 获取userInfo
                wx.getUserInfo({
                    success: res => {
                        let userInfo = res.userInfo
                        // 请求
                        imitationPost({
                            url: &#39;/test/saveUserInfo&#39;,
                            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)
    }
})

Copy after login

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

Because the WeChat applet asynchronous api is in the form of success and fail, everyone has encapsulated it 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);
        });
    }
}

Copy after login

Look at the simplest one first:

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

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

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

})

Copy after login

You can see that there is one less indentation in the simplified callback, and the callback function 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(&#39;./promisify&#39;)
const login = promisify(wx.login)
const getSystemInfo = promisify(wx.getSystemInfo)

// 登录
login().then(res => {
   let code = res.code
   // 请求
   pImitationPost({
       url: &#39;/test/loginWithCode&#39;,
       data: {
           code
       },
   }).then(data => {
       // 获取userInfo
       getUserInfo().then(res => {
           let userInfo = res.userInfo
           // 请求
           pImitationPost({
               url: &#39;/test/saveUserInfo&#39;,
               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)
})

Copy after login

You can see that the simplification effect is very obvious.

The same applies to web pages or nodejs, etc.

Related recommendations:

WeChat applet Promise simplified callback example sharing

Promise example analysis in js

How to use jQuery’s Promise correctly

The above is the detailed content of Promise simplifies callback example sharing. For more information, please follow other related articles on the PHP Chinese website!