微信小程序通过async、await验证用户是否已经授权

前端 2019-12-07T16:57:21 浏览:230

首先简要说明一下微信小程序异步解决方案,需要通过一个支架,也就是 regenerator实现,实现方法,各位GOOGLE之。有了这个环境后,async、await就会实现它的价值了。

注意点:wx. getSetting、 wx.getUserInfo 等无法直接同步处理。因此把微信小程序异步API转化为Promise。用Promise处理异步操作有多方便,谁用谁知道。

import regeneratorRuntime from '../../utils/runtime.js'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    authorized: false,
    userInfo: null
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.userAuthorized()
  },
  /**
   * 将wx.getSetting 返回一个Promise对象
   */
  getSetting () {
    return new Promise(function (resolve) {
      wx.getSetting({
        success(res) {
          resolve(res)
        }
      })
    })
  },
  /**
   * 将wx.getUserInfo 返回一个Promise对象
   */
  getUserInfo () {
    return new Promise(function (resolve) {
      wx.getUserInfo({
        success(res) {
          resolve(res)
        }
      })
    })
  },
  /**
   * 运用async、await,来验证用户是否已经授权
   */
  async userAuthorized () {
  	// 获取用户的当前设置。
    const data = await this.getSetting()
    // 如果 data.authSetting['scope.userInfo'] 有值 证明用户已授权
    if (data.authSetting['scope.userInfo']) {
      // 因用户已授权,故通过this.getUserInfo() 可以拿到用户已授权的用户信息
      const userInfoData = await this.getUserInfo()
      this.setData({
        userInfo: userInfoData.userInfo,
        authorized: true
      })
    }
  },
  /**
   * 获取用户授权的信息
   */
  onGetUserInfo(event){
    const userInfo = event.detail.userInfo
    if(userInfo){
      this.setData({
        userInfo,
        authorized: true
      })
    }
  }
})

方法二 附其他老师的解决方案!,不通过async、await

promisic.js

const promisic = function (func) {
  return function (params = {}) {
    return new Promise((resolve, reject) => {
      const args = Object.assign(params, {
        success: (res) => {
          resolve(res)
        },
        fail: (error) => {
          reject(error)
        }
      })
      func(args)
    })
  }
}

module.exports = {
  promisic
}
import { promisic } from '../../utils/promisic.js'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    authorized: false,
    userInfo: null
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.userAuthorized()
  },
  /**
   * 运用promisic,来验证用户是否已经授权
   */
  userAuthorized () {
    promisic(wx.getSetting)()
      .then(data => {
        if (data.authSetting['scope.userInfo']) {
          return promisic(wx.getUserInfo)()
        }
        return false
      })
      .then(data => {
        if (!data) return 
        this.setData({
          authorized: true,
          userInfo: data.userInfo
        })
      })
  },
  /**
   * 获取用户授权的信息
   */
  onGetUserInfo (event){
    const userInfo = event.detail.userInfo
    if(userInfo){
      this.setData({
        userInfo,
        authorized: true
      })
    }
  }
})

2种方案的出发点都是通过Promise实现。