解决小程序 callback hell

让我们先回顾一下 callback

写一个授权通用方法。

const _authHandle = (setting ,callback) => {
    wx.getSetting({
        success: (response) => {
            if (response.authSetting[setting]) {
                return callback(true)
            }

            wx.authorize({
                scope: setting,
                success: () => {
                    return callback(true)
                },
                fail: () => {
                    return callback(false)
                }
            })
        }
    })
}

usage

_authHandle('scope.userInfo',(result) => {
  console.log(result)
})

Promise

我们用 promise 稍微修改一下之前的函数~

const _authHandle = (setting) => {
    return new Promise((resolve, reject) => {
        wx.getSetting({
            success: (response) => {
                if (response.authSetting[setting]) {
                    resolve(true)
                }
    
                wx.authorize({
                    scope: setting,
                    success: () => {
                        resolve(true)
                    },
                    fail: () => {
                        reject(false)
                    }
                })
            }
        })
    })
}

usage

_authHandle('scope.userInfo')
    .then(res => {
        // res
    })
    .catch(err => {
        // err
    })

async/await

原生小程序里面使用 async/await ,需要引入 facebook 的 regenerator-runtime

去 github 上把文件下到 lib 文件内，可以新建一个叫 runtime 的文件夹，丢进去。

import regeneratorRuntime from'../../lib/runtime.js'

usage

async onTapAuth () {
    await _authHandle('scope.userInfo')
        .then(() => {
            // yes
        })
        .catch(() => {
            // no
        })
}

注意： await 总是返回一个 Promise 对象，所以可以使用 then catch 捕获异常，或者使用同步 try catch 捕获异常。推荐使用 then catch