小程序同步异步

简介: 小程序同步异步

最近一段时间写微信小程序大家或许注意到了有些时候在登录的时候莫名其妙的报错了,然后就开始一路找bug之路,每次console.log都没问题都有数据啊,但是就是报错,这时候用断点调试法发现,上一步的函数体还没有执行完毕呢,下一个函数就开始执行了,但是呢下一步的函数还必须需要上一步返回的参数不可,百度了一下才知道那是因为微信小程序是异步执行的,两个函数同时执行谁也不等谁,这里如果有兄弟不明白同步和异步的话可以百度一下就知道了,这时候必须要使用javascript的函数Promise,但是呢微信小程序增加ES6的promise特性支,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性,网上有第三方自己造的轮子,但是我用了以后我就后悔了,真的是一脸懵懂啊,想了想算了,快算了自己想个办法吧


////////

asyncFunc1(function(){
  //...
  asyncFunc2(function(){
    //...
    asyncFunc3(function(){
      //...
      asyncFunc4(function(){
        //...
        asyncFunc5(function(){
           //...
        });
      });
    });
  });
});

上面的代码应该是你想要的执行顺序吧,但是感觉太难看了,所以我想了一个笨办法,什么话都没有上代码

 // 这是app.js的getUserInfo方法
    getUserInfo: function(cb) 
    {
        var that = this
if(this.globalData.userInfo)
        {
            typeof cb =="function" && cb(this.globalData.userInfo)
        }else 
        {
            // 调用登录接口
            wx.login({
                success: function(res) 
                {
                    // 登录成功
if (res.code) 
                    {
                        var code = res.code;
                        wx.getUserInfo({
                            success: function(res2)
                            {
                                that.globalData.userInfo = res2.userInfo
                                typeof cb =="function" && cb(that.globalData.userInfo)
                                var username = res2.userInfo.nickName
                                var img = res2.userInfo.avatarUrl
                                // 请求自己的服务器
                                wx.request({
                                    // 自己的服务接口地址
                                    url    : '自己的服务接口地址',
                                    method : 'POST',
                                    header : {'content-type':'application/x-www-form-urlencoded'},
                                    data   : {encryptedData: res2.encryptedData, iv: res2.iv, code: code},
                                    success: function (res) 
                                    {
                                        console.log(res)
                                        // 4.解密成功后 获取自己服务器返回的结果
if(res.data.code =='200') 
                                        {
                                            wx.setStorageSync('user[app_key]', res.data.result.app_key)
                                            wx.setStorageSync('user[app_token]', res.data.result.app_token)
                                            wx.setStorageSync('user[paperTypeId]', '201607301639232601224301')
                                        }else 
                                        {
                                            wx.showLoading({
                                                title: '网络错误',
                                                mask:true
                                            })
                                        }
                                    },
                                    fail:function(res)
                                    {
                                        wx.showLoading({
                                            title: '系统内部错误',
                                            mask:true
                                        })
                                    }
                                })
                            }
                        })
                    }else 
                    {
                        wx.showModal({
                            title: '提示',
                            content: '获取用户登录态失败!'+res.errMsg
                        })
                    }
                }
            })
        }
    }
    // 这是index.js的内容
    onload
    {
        wx.showLoading({
            title: '加载中',
            mask:true
        })
        // 在这里原本我是打算app.getUserInfo(function(){这里是我的下一步的request请求但是还是不行})
        // 因为我需要登录后的用户信息,但是app.getUserInfo和下面的request请求基本上是同时请求的所以获取不到
        app.getUserInfo()
        var that = this
        // 在这里我设置了一个定时器循环多次去执行去判断上一步的函数执行完毕没有
        // 但是也不能无限循环,所以要叫一个判断当执行超过多少秒后报一个网络错误
        var times = setInterval(function()
        {
            // 因为一开始缓存当中指定的key为假当为真的时候就说明上一步成功了这时候就可以开始发送下一步的请求了
            var search = wx.getStorageSync('user[app_key]')
if(search)
            {
                var app_key     = wx.getStorageSync('user[app_key]')    // 用户名
                var app_token   = wx.getStorageSync('user[app_token]')  // 用户token
                var paperTypeId = wx.getStorageSync('user[paperTypeId]')// 考试类型
                var ptype       = wx.getStorageSync('ptype')
                wx.request({
                    url: '这是你服务器的网址',
                    data: 
                    {
                        app_key     : app_key,
                        app_token   : app_token,
                        paperTypeId : paperTypeId,
                        examId      : '201607271938505071233880'                    },
                    method: 'GET',
                    header: {'content-type': 'application/json'},
                    success: function(res)
                    {   
if(res.data.status ==='200')
                        {
                            that.setData({
                                items:res.data.result
                            })
                            // 在这里停止加载的提示框
                            setTimeout(function(){
                                wx.hideLoading()
                            },1000)
                            // 这里必须要清除不然就等着循环死吧
                            clearTimeout(times);
                        }else
                        {
                            console.log('服务器内部错误')
                        }
                    }
                })
            }
        }
    }
目录
相关文章
|
4月前
|
前端开发 小程序 API
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
71 0
|
6月前
|
小程序 算法 UED
【专栏】小程序图片合成就绪渲染的转变,从异步并发渲染到同步阻塞渲染
【4月更文挑战第29天】本文探讨了小程序图片合成就绪渲染的转变,从异步并发渲染(提高效率,并发处理但可能导致资源竞争和顺序难控)到同步阻塞渲染(顺序可控,资源管理更精细,可能引起界面卡顿)。同步阻塞通过任务队列和阻塞机制确保顺序,解决并发问题。注意避免长时间阻塞,及时释放资源,优化任务效率,并结合异步处理。选择合适方案取决于实际需求,以平衡效率与一致性。
93 1
|
6月前
|
小程序 前端开发 JavaScript
微信小程序——解决异步问题
微信小程序——解决异步问题
333 0
|
6月前
|
小程序 安全 搜索推荐
【社区每周】代创建小程序接口支持同步升级商家账号;提审接口上线审核驳回截图功能(2022年7月第四期)
【社区每周】代创建小程序接口支持同步升级商家账号;提审接口上线审核驳回截图功能(2022年7月第四期)
134 11
|
小程序 前端开发 JavaScript
小程序request请求回调函数异步的解决办法
小程序request请求回调函数异步的解决办法
241 0
|
小程序 数据库 数据安全/隐私保护
关于小程序云开发cms内容管理无法使用,无法同步内容模型到云开发数据库的解决方案
关于小程序云开发cms内容管理无法使用,无法同步内容模型到云开发数据库的解决方案
327 0
|
小程序 安全 数据库
小程序里使用async和await变异步为同步,解决回调地狱问题
小程序里使用async和await变异步为同步,解决回调地狱问题
178 0
|
前端开发 小程序 Java
小程序不同页面的异步回调,callback和promise的使用讲解
小程序不同页面的异步回调,callback和promise的使用讲解
204 0
|
缓存 小程序 前端开发
微信小程序之onLaunch与onload异步问题
微信小程序之onLaunch与onload异步问题
728 0
|
前端开发 小程序 UED
小程序图片合成:异步并发渲染→同步阻塞渲染
小程序图片合成:异步并发渲染→同步阻塞渲染
小程序图片合成:异步并发渲染→同步阻塞渲染
下一篇
无影云桌面