解決小程式 callback hell

zyw5791557發表於2018-08-03

讓我們先回顧一下 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

相關文章