微信小程序的同步异步解决方案

最近一段时间写微信小程序你们或许注意到了有些时候在登陆的时候莫名其妙的报错了,而后就开始一路找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('服务器内部错误')
                        }
                    }
                })
            }
        }
    }

你们若是不想用插件的,彻底能够用我这个方法,可是要注意死循环的问题,但愿能对你们的爬坑之路有帮助, 代码里面