How to implement callbacks using Promise in WeChat applet?-JS Tutorial-php.cn

How to implement callbacks using Promise in WeChat applet?

亚连

Release： 2018-06-07 15:16:00

Original

1940 people have browsed it

This article mainly introduces the use of Promise to simplify callbacks in WeChat applet. Now I share it with you and give you a reference.

Promise is a solution to asynchronous programming that is more reasonable and powerful than traditional solutions - callback functions and events. It was first proposed and implemented by the community. ES6 wrote it into the language standard, unified its usage, and provided Promise objects natively.

The so-called Promise is simply a container that stores the result of an event (usually an asynchronous operation) that will end in the future. Syntactically speaking, Promise is an object from which messages for asynchronous operations can be obtained. Promise provides a unified API, and various asynchronous operations can be processed in the same way.

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 They are all in the form of success and failure. Someone has encapsulated 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

Let’s look at the simplest one first:

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

  }
})

Copy after login

Use the above promisify. After js is simplified:

const promisify = require(&#39;./promisify&#39;)
const getSystemInfo = promisify(wx.getSystemInfo)

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

})

Copy after login

##getSystemInfo

You can see that there is one less indentation in the simplified callback, and the callback function is reduced from 9 lines to 6 OK.

The simplified effect of the callback pyramid

Then let’s take a look at the initial 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

Simplification Callback

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement webpack packaging optimization in vue

Detailed explanation of vue coding style

Practical project in vue iview less echarts (detailed tutorial)

The above is the detailed content of How to implement callbacks using Promise in WeChat applet?. For more information, please follow other related articles on the PHP Chinese website!