小程序同步异步

简介: 小程序同步异步

最近一段时间写微信小程序大家或许注意到了有些时候在登录的时候莫名其妙的报错了,然后就开始一路找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('服务器内部错误')
                        }
                    }
                })
            }
        }
    }
目录
相关文章
|
2月前
|
小程序 安全 搜索推荐
【社区每周】代创建小程序接口支持同步升级商家账号;提审接口上线审核驳回截图功能(2022年7月第四期)
【社区每周】代创建小程序接口支持同步升级商家账号;提审接口上线审核驳回截图功能(2022年7月第四期)
82 0
|
11月前
|
小程序 数据库 数据安全/隐私保护
关于小程序云开发cms内容管理无法使用,无法同步内容模型到云开发数据库的解决方案
关于小程序云开发cms内容管理无法使用,无法同步内容模型到云开发数据库的解决方案
243 0
|
11月前
|
小程序 安全 数据库
小程序里使用async和await变异步为同步,解决回调地狱问题
小程序里使用async和await变异步为同步,解决回调地狱问题
132 0
|
前端开发 小程序 UED
小程序图片合成:异步并发渲染→同步阻塞渲染
小程序图片合成:异步并发渲染→同步阻塞渲染
小程序图片合成:异步并发渲染→同步阻塞渲染
|
前端开发 小程序
微信小程序 解决 wx.request同步问题 方便开发 Promise方式
微信小程序 解决 wx.request同步问题 方便开发 Promise方式
1088 0
|
移动开发 小程序 前端开发
ALive小程序:阿里全平台,同步开直播
作为时下最火的直播业务,这其中的前端技术是如何构建和思考的?淘宝直播技术团队通过直播开放体系的建设让直播遍地开花。本文作者与你分享对直播技术思考。
ALive小程序:阿里全平台,同步开直播
|
13天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
13天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
13天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
13天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。