微信小程序wx.login先执行onLaunch与onLoad加载顺序问题

other / 2022年11月04日 11时30分 / 3299人浏览

遇到问题

请求api返回需要先登录,实际上登录已成功

想必大家在开发小程序的时候,肯定遇到了页面请求数据加载接口先执行,wx.login()登录接口后执行,导致请求接口返回请先登录,实际上登录确实成功的异常情况!

问题分析

在微信小程序中,由于app.js中的onLaunch和其他页面中js的onLoad属于异步执行。 有时onLaunch中会有网络请求,在等待网络返回值时,也就是还未执行完时,其他页面中js的onLoad已经执行了。这时就会导致页面中的onLoad函数没有获取到登录成功后的token以及其他必备参数,从而导致请求接口时,因为缺失必备参数获得的返回值异常的情况。

解决问题

自定义回调函数

这里我们在app.js中,自定义一个名为 loginCallback 回调函数,然后再页面的onLoad()函数中,监听 loginCallback 函数的执行,继续完成需要执行的操作即可。 app.js
App({
  onLaunch(options) {
    let that = this;

	wx.login({
	  success: res => {
	    api.login(res.code, scene).then(() => {
	      if (that.loginCallback){
	        that.loginCallback(1);  // 执行自定义回调函数
	      } 
	    });
	  },
	});
  });
});

index.js
const app = getApp()

Page({
  onLoad() {
	app.loginCallback = flag => {  // 监听自定义回调函数执行
	  if(flag) {
	    api.post('/xxxxxxxxxxxxx').then((res) => {  // post api
	      // do something
	    });
	  }
	}
  })
})