评论

异步环境下获取 openid的几个方法

异步环境下获取openid

测试几段代码,在异步环境获取 openid ,以交流探讨。

1. 小程序启动时获取

在 Page 的 onLoad 阶段调用以下函数。该函数通过调用云函数获取openid。当拿到后即设置一个变量 dataReady。该变量用来控制 wxml 页面显示,当为真时即完整显示页面。这里假定:页面完整显示后再使用openid。

// index.js
Page({
    data: {
        openid : "", 
        dataReady: false,
    },
    onLoad: function(){
         getopenid(this)
         //...
    },
})

function getopenid(that){
         wx.cloud.callFunction({
            name: getopenid,
            success: res=>{
               that.setData({openid: res.openid, dataReady: true})
            }
         })
}



// index.xmls
//
// <block wx:if="{{dataReady}}">
//    <view>
//    </view>
// </block>
//

在 函数getopenid中,除了采用回调函数方式,亦可用 Promise 对象(ES6),或 async/await型函数(ES8)等方式。

2. 在其他场合获取

这时要确保使用openid的代码应出现在获取操作完成后。比如使用回调函数方式:

function getopenid(){
         wx.cloud.callFunction({
            name: getopenid,
            success: res=>{
               //在这里使用openid
            }
         })
}

如果使用 ES6 中的 Promise 对象,就要出现在then语句块里:

var p1 = new Promise(function (resolve, reject) { 
         wx.cloud.callFunction({
            name: "getopenid",
            data: {para1: "", para2: ""}, 
            success: res=>{resolve(res)},
         })
p1.then(res => {
    // 在这里使用 openid 
    }, function(res){}
)

如果使用 ES8 中的async 型函数 ,则应该出现在 await 指令之后。

async getopenid function(){
      lcid = await wx.cloud.callFunction()
      //在这里使用openid 
}


以下列出异步环境下的代码执行顺序:其中:*step i 表示由系统发起。先前各步迅速执行完后,控制权即交给系统。等到悬挂任务(PendingJob)完成后再由系统发起执行后续代码。

1. 回调函数方式

// step 1
func1()
// step 4
function func1(){
     // step 2
     var lca = wx.cloud.callFunction({success: res=>{
         // *step 5
        }
     })
     // step 3
}

2. Promise 对象

// step 1
var p1 = new Promise(function(resolve, reject){
         wx.cloud.callFunction({
            success: res=>{
               // *step 4
               resolve(res)
            }
         }) 
    })
// step 2
p1.then({
    // *step 5
    }, {
    }
)
// step 3

3. async/await 型函数

// step 1
func1()
// step 3
async function func1(){
      // step 2
      var lca = await wx.clooud.callFunction()
      // *step 4
}

欢迎批评指正。[END]

最后一次编辑于  2020-05-18  
点赞 0
收藏
评论

1 个评论

  • Admin ²º²³
    Admin ²º²³
    2020-05-16
    onLoad: function(){
             getopenid()//不是this. getopenid()吗
             //...
        },
    


    不是this. getopenid()吗


    2020-05-16
    赞同
    回复 5
    • 英忠通信
      英忠通信
      2020-05-16
      // index.js
      Page({
          data: {},
          onLoad: function(){

             var lca = getopenid1()     

             var lcb = this.getopenid2()
             var lcc = getopenid3()
             function getopenid1(){}
          },
          getopenid2: function(){},
      })


      function getopenid3(){}
      2020-05-16
      回复
    • 英忠通信
      英忠通信
      2020-05-16
      经测试,Page({})内定义的函数要用this,在其他场合定义的就不用。
      2020-05-16
      1
      回复
    • Admin ²º²³
      Admin ²º²³
      2020-05-16回复英忠通信
      没注意你是放到page外了。~~
      2020-05-16
      1
      回复
    • 英忠通信
      英忠通信
      2020-05-16回复Admin ²º²³
      欢迎指正
      2020-05-16
      回复
    • Admin ²º²³
      Admin ²º²³
      2020-05-16回复英忠通信
      太客气了,学习到了不少知识。感谢分享
      2020-05-16
      回复
登录 后发表内容