微信小程序如何实现page的onload request在app onlanch结束后触发?
因为app onlanch中有用户登录的request请求,如果没有完成就执行page onload中的request,会出现登录失败的错误
网友回复
三种方案
一、promise
在app.js中声明一个userLogin函数
App({ onLaunch: function() { console.log('App Launch') //不在这里默认请求 }, /** * 定义全局变量 */ globalData: { openid: '', //用户openid userId: '', //用户编号 }, /** * 用户登录请求封装(解决onlaunch和onload执行顺序问题) */ userLogin: function() { var that = this; //定义promise方法 return new Promise(function(resolve, reject) { // 调用登录接口 wx.login({ success: function(res) { if (res.code) { console.log("用户登录授权code为:" + res.code); //调用wx.request请求传递code凭证换取用户openid,并获取后台用户信息 wx.request({ url: 'https://www.xxxx.xxx.api', // 后台请求用户信息方法【注意,此处必须为https数字加密证书】 data: { code: res.code //code凭证 }, header: { 'content-type': 'application/json' // 默认值 }, success(res) { console.log(res.data) if (res.data.errcode == 0) { //获取用户信息成功 that.globalData.openid = res.data.openid; that.globalData.userId = res.data.UserId; //存入session缓存中 wx.setStorageSync("userId", that.globalData.userId) console.log(that.globalData.userId); console.log(that.globalData.openid); //promise机制放回成功数据 resolve(res.data); } else { reject('error'); } }, fail: function(res) { reject(res); wx.showToast({ title: '系统错误' }) }, complete: () => { } //complete接口执行后的回调函数,无论成功失败都会调用 }) } else { reject("error"); } } }) }) }});然后再每个page的onload request请求执行改变改为
const app=getApp();//初始化app.js page({ onLoad: function (option) { var that = this; let UserId = wx.getStorageSync("userId"); console.log("进入首页的用户编号为:" + UserId); if (UserId == '') { app.userLogin().then(res => { console.log("promise回调后的数据:"); console.log(res); if (res.errcode == 0) { //把首页需要请求的数据接口都提取到一个自定义方法中 that.GetData(); } }) } else { //用户缓存存在 that.GetData(); } } , GetData() { //需要用到用户编号换取商品信息的接口 } })
二、定时查询
app.js中还是往常一样登录获取用户的id,但是在page onload中我们会定时查询userid,看看有没有值,有值就request,没值就定时等待
//app.js App({ onLaunch: function () { wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { }, success: function(res) { this.globalData.userid= res.userid; } }) }, globalData: { userid: '' } }) //index.js //获取应用实例 const app = getApp() Page({ data: { albumDisabled: true, bindDisabled: false }, getdata:function(){}, onLoad: function () { //500毫秒查询一次是否获取了userid var checkuser = setInterval(function () { var userid=app.globalData.userid if (userid!="") { clearTimeout(checkuser); that.getdata(); } }, 500); } })
三、app 回调函数
//app.js App({ onLaunch: function () { wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { }, success: function(res) { this.globalData.userid= res.userid; //由于这里是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.useridCallback){ this.useridCallback(res.userid); } } }) }, globalData: { userid: '' } }) //index.js //获取应用实例 const app = getApp() Page({ data: { albumDisabled: true, bindDisabled: false }, onLoad: function () { //判断是用户是否绑定了 if (app.globalData.userid&& app.globalData.userid!= '') { this.setData({ albumDisabled: false, bindDisabled: true }); } else { // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.useridCallback = userid=> { if (userid!= '') { this.setData({ albumDisabled: false, bindDisabled: true }); } } } } })