小程序开发之解决第一次加载页面获取不到openid的问题

记录：小程序开发过程中，index.wxml加载时需要使用用户信息，之前wx.login是写在app.js的onLaunch函数中，通过后台获取到openid后存储到本地缓存中，之后在index.js中获取openid老是出现第一次取值为空，第二次再打开就有值的情况。原代码如下：

app.js:

onLaunch: function () {
    var that = this 
    wx.login({
      success: function (res) {
        //code 获取用户信息的凭证
        if (res.code) {
          //请求获取用户详细信息
          wx.request({
            url: "https://pig.intmote.com/wxApp/user/getOpenid.do",
            data: { "code": res.code },
            method: 'GET',
            header: {
              'Content-type': 'application/json'
            },
            success: function (res) {
              //保存openid
              wx.setStorageSync('openid', res.data.openid);//存储openid
              wx.showToast({ title: "登录成功" })
            }
          });
        } else {
          wx.showToast({ title: "登录失败" })
        }
      }
    }) 
   },

index.js

onLoad: function () {
    var that = this;  
    wx.showToast({ title: wx.getStorageSync('openid') });  
    that.setData({
      openid: wx.getStorageSync('openid')
    })
  },

出现这种情况是因为app.js onLaunch是异步加载，在加载index.js onLoad的时候还没有取到openid

解决方案：

使用promise来获取异步操作的消息。

Promise简介

Promise 是异步编程的一种解决方案，所谓Promise ，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。

promise基本用法如下：

const promist = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise 实例生成以后，可以用then 方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value){
//success
},function(error){
//failure
});

小程序代码实现：

1.app.js中定义getOpenid函数，并使用promise生成实例

getOpenid: function () {
    var that = this;
    return new Promise(function (resolve, reject) {
      wx.login({
        success: function (res) {
          //code 获取用户信息的凭证
          if (res.code) {
            //请求获取用户openid
            wx.request({
              url: "https://pig.intmote.com/wxApp/user/getOpenid.do",
              data: { "code": res.code },
              method: 'GET',
              header: {
                'Content-type': 'application/json'
              },
              success: function (res) {
                wx.setStorageSync('openid', res.data.openid);//存储openid
                var res = {
                  status: 200,
                  data: res.data.openid
                }
                resolve(res);
              }
            });
          } else {
            console.log('获取用户登录态失败！' + res.errMsg)
            reject('error');  
          }
        }
      })
    });
  }, 

2.index.js通过promise的then方法取出openid

//获取应用实例
const app = getApp()
Page({
  data: {
    openid : '',
  }, 
  onLoad: function () {
    var that = this;  
    app.getOpenid().then(function (res) {
      if (res.status == 200) {
        that.setData({
          openid: wx.getStorageSync('openid')
        })
      } else {
        console.log(res.data);
      }
    }); 
  },
})

参考文章：点击打开链接