美文网首页
小程序网络延迟

小程序网络延迟

作者: nCov | 来源:发表于2019-06-10 10:26 被阅读0次

4G网络下或者被限速的情况,经常会出现loading一直打圈页面假死,我把就想到的方法记录下
@增加页面下拉刷新功能
@ 获取数据失败处理
@失败回调

增加页面下来刷新功能,当前json文件中添加 "enablePullDownRefresh":true
onPullDownRefresh 下拉刷新,这里有个情况当执行下拉刷新操作动画会一直显示
,此时可以调用 wx.stopPullDownRefresh() 关闭动画停止下拉

{
   "enablePullDownRefresh":true
}
/*在js中添加*/
 /*下拉刷新*/
  onPullDownRefresh:function(){
     console.log('你的代码')
  },

获取数据失败处理,无非就是获取数据失败,可以给用户一个提示,让用户重新请求,
两种情况 @APi 都有success、fail,失败走fail 就行
@ 向服务器请求数据,服务器就也一样,返回成功或者失败,这边捕获错误;
我这边用的云开发,可以通过try catch 来完成

失败回调,我想用这种方式,我不给用户提示,失败直接接着请求获取数据

(我是云开发)最后我是这样做的,利用 定时器 每隔一定周期重新请求一次,也用了catch捕获错误!
在实现过程中app.json中添加过网络延迟如下

"networkTimeout": {
    "request": 10000,  
     "connectSocket": 10000, 
     "uploadFile": 10000,
     "downloadFile": 10000         
  },

我通过路由器把当前电脑网速限制上传1k 下载1k 网页都不打开(为了调试拼了),在模拟器里即使这样网速下居然还有概率请求到数据(厉害了云), 在这样的情况下 我遇见的问题如下

  1. 模拟器直接红色提示 request:fail timeout 但是我的catch无法捕获错误!
    这样就无法实现逻辑(郁闷、悲催)
  2. 我本以为networkTimeout 发送请求超时10s ,就应该有错误提示但是现实是残酷的,
    既然是残酷的我就不过多说了,反正结果不理想,不是我预期超过10s给反馈
  3. 在这样极端网速下,当发送请求也会出现云函数(服务器)根本就没接收到请求,所以会
    页面一直loading

以上种种因网络网速不确定的因素真是没有好的办法,所以我用了定时器 ,页面渲染完成每隔10s重新请求一次

/*渲染完成 10s重载 */
 onReady:function(){
   let that=this;
   that.data.setInter = setInterval( function () {
        that.onLoad();
     }
     ,10000);   
 },

页面卸载的时候清除定时器

 /*页面卸载清除计时器 */
 
  onUnload: function () {
    let that = this;
    clearInterval(that.data.setInter)
  },

最后我在catch 捕获错误也做了相应提示,检查当前网络类型,如果不是4g || wifi,给客户端提示
请更换网络,只要用户更换了网络,嘿嘿 那也不管了反正10s后又会重新请求!最后总结一下
我把文章开始的三种方法都用上了!

相关文章

  • 小程序网络延迟

    4G网络下或者被限速的情况,经常会出现loading一直打圈页面假死,我把就想到的方法记录下@增加页面下拉刷新功能...

  • 程序配置

    小程序目录结构 app.json小程序全局配置 ,设置窗口样式,菜单,网络延迟,下拉刷新等选项。 app.js程序...

  • 网络延迟

    现在已经是11点50分了,网速卡得现在还没有登陆上,只好用流量来写一点东西。 今天星期五,回来的时候,做大巴。原来...

  • 微信小程序网络封装(简单高效)

    推荐一篇微信小程序网络封装的文章,这篇文章主要介绍了微信小程序网络封装(简单高效),微信小程序的网络请求很便捷,直...

  • 一个命令教会你模拟网络异常

    选择你要选择模拟网络异常的网卡,以eth0 举例 普通网络延迟: 抖动延迟: 可模拟较真实的差网络条件,延迟的同时...

  • 微信小程序 延迟搜索

    实现效果: 实现思路:用户输入时,重置搜索等待时间 代码如下: wxml: js

  • 技术干货 | mPaaS 小程序高玩带你起飞:客户端预置小程序无

    传统的小程序技术容易受到网络环境影响,当网络质量不佳时可能导致拉取不到小程序包的情况。通过预置小程序,即可规避该问...

  • https原理

    我们知道小程序的wx.request网络接口只支持HTTPS协议(文档-小程序网络说明),为什么HTTPS协议就比...

  • macOS11高版本xcode12模拟网络高延迟(最新)

    前端/客户端 开发领域,模拟高延迟网络环境能帮助我们强壮程序,提高不少用户体验。 ?工具下载地址:https://...

  • 小程序网络接口

    实现方法 在上述代码中,由于success的回调函数中,this的指向发生了改变,因此需要通过var that =...

网友评论

      本文标题:小程序网络延迟

      本文链接:https://www.haomeiwen.com/subject/gteaxctx.html