首页天道酬勤js异步请求返回数据顺序问题,小程序app

js异步请求返回数据顺序问题,小程序app

张世龙 05-06 01:59 105次浏览

当我们设计小程序时,我们想在app.js开始加载的时间向后端提出请求,返回用户的信息,然后决定在用户的主页上显示什么内容。 也就是说,我们希望的执行顺序是app.js----index.js,但最终进入首页时经常得不到用户的信息。 而且,这是

原因是小程序的启动请求不同步。 也就是说,当我们在app.js上开始请求并查询用户信息时,applet还在继续,没有被阻止,所以applet会继续到index.js上显示首页,然后在app.js上的请求首页的显示和我们的期待不同,突然想到了电影中刀下留人的场景。 如果tdhk慢慢跑,就是这些效果

由于异步请求,我们发现发生了这种情况。 那么,如何解决回调呢? 回调在首页index.js中定义app.js的回调函数,并在app.js中运行此回调函数。 请参考下图

首页index.js

onload3360function(option ) if ) optionoption.showlogin==1) this.setdata ) showlogin:1 ) if ) app.GD { this.} ) if ) this.data.userinfo==' no userinfo ' (this.ser info ) ) no ELSE(app.indexcallback=(RES ) ) this.setdata this.quanyilist (; this.bannerlist (; }、其中,如果app.globalData.userInfo不为空,则将userinfo分配给当前页面的userinfo;如果app.globalData.userInfo为空,则调用app.js

分析一下这里的代码

如果app.globalData.userInfo为空,则表示尚未返回请求app.js中用户信息的异步请求;如果已运行到此代码块,则index.js的onload为app.js 因此,将其传递给app.js

如果app.globalData.userInfo不为空,那么app.js在index.js之前运行并完成,这通常是我们期望的顺序

看看app.js onlaunch的代码

app(onlaunch:function ) ) letheaderheight=this.get header height ); this.global data.header height=header height; this.userLogin (;userLogin () { let that=this; indexmodel.login(.then () RES ) ) that.global data.userinfo=RES.data.userinfo app ) on launch 3360 function this . this.userLogin (;userLogin () { let that=this; indexmodel.login(.then ) ) RES ) ) that.global data.userinfo=RES.data.userinfo that.indexcallbackthat.ind dex 在userlogin中,异步请求判断并调用indexCallback的方法,如果有则回调,否则不运行that.indexcallbackthat.indeer

代码说明

如果indexCallback为真,则相应的是app.js请求尚未返回到index.js的onload运行,并且已注册app.js回调

如果indexCallback为假,则当请求返回时,index.js指示尚未运行,这是我们期待的顺序

uniapp onload,页面加载完触发的事件