现在订阅送半年,再次订阅 / 续订送一年。(活动即将结束)

微信小程序:回调,Promise,async,await 的使用例子

下面用个例子演示在微信小程序里使用 Promise,async,await 这些东西。小程序里有个 wx.authorize 接口可以向用户要些权限,访问用户对应的资源,比如得到用户的位置,获取用户的相关信息等等。wx.getSetting 这个接口可以得到用户的授权配置信息,比如用户是否已经授权我们使用他的用户信息。

回调

假设在我的小程序想创建个函数可以检查用户的授权信息的状态,比如我想检查用户信息(scope.userInfo)的授权状态,使用回调的形式来定义这个函数,像这样:

const authUserInfo = (callback) => {
  wx.getSetting({
    success: (response) => {
      if (response.authSetting['scope.userInfo']) {
        return callback(true)
      }

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

这样用:

authUserInfo((result) => {
  console.log(result)
})

wx.getSetting 的成功回调里,它的 response.authSetting 里面包含的就是授权信息。

Promise

现在我们用 Promise 的形式定义之前的函数,它可以像这样:

const authorize = (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)
          }
        })
      }
    })
  })
}

用函数创建函数:

const authUserInfo = authorize('scope.userInfo')

Promise 的用法:

authUserInfo()
  .then(() => {
    console.log('yes')
  })
  .catch(() => {
    console.log('no')
  })

async,await

先导入 regenerator-runtime。

import regeneratorRuntime from '../../libs/regenerator-runtime'

用法:

async onTapSubmitButton () {
  try {
    await authUserInfo()
    console.log('yes')
  } catch (error) {
    console.log('no')
  }
}
文章参考了“一斤代码” 的文章,与 “Aki”(宁皓 QQ 群里她叫喵~)提供的小程序模板。

参考资料

  1. 微信小程序中使用Promise进行异步流程处理
  2. Akiq2016/mini-program-template
  3. Facebook Regenerator Runtime

评论

学习了


微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅万达招商,万达招商QQ公众号。



240746680

用 QQ 扫描二维码,
加入万达招商,万达招商QQ QQ 群。

统计

8306
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注万达招商,万达招商QQ,每天进步一点

友情链接:万达娱乐直属QQ  万达娱乐主管  万达娱乐  万达娱乐开户  万达娱乐主管QQ  万达娱乐招商  万达娱乐招商QQ  万达娱乐主管QQ  测试