3***@qq.com
3***@qq.com
  • 发布:2016-08-01 10:14
  • 更新:2016-12-13 15:01
  • 阅读:3077

为什么H5builder 上的网络连接这么不稳定??有何解决办法

分类:HBuilder
   我在做H5Builder App的过程中首先使用的是XMLHttpRequest,但使用之后发现网络请求非常不稳定,为什么这么说,1、我们服务器是带宽50M的,2、之前用web应用访问过几个月了,速度一直都非常快且稳定,3、我写过demo,一直循环测同样的接口,很稳定,下面有图,4、反观H5Builder的速度,时而快时而慢,快的时候可以只要最低耗时 3秒(服务器做了3秒延迟返回),慢的时候可以到6-7秒或者直接超时。  
   想请教一下,谁遇到过此类问题没,一下贴代码。  
   function xhrCreate2(params) {  
        var param = {  
            url:"",  
            data:{},  
            type:"get",  
            cache:false,  
            expire:null,  
            timeout:8500,  
            refreshCache:false,  
            sucess:function(txt){},  
            error:function(xhr){}  
        }  
        $.extend(param,params);  

        //console.log( "创建请求:" );  
        var xhr = new plus.net.XMLHttpRequest();  
        if(param.timeout)xhr.timeout = param.timeout;  
        var timeout1=0,timeout2=0;  
        xhr.onreadystatechange = function () {  
            switch ( xhr.readyState ) {  
                case 0:  
                    //console.log( "xhr请求已初始化" );  
                break;  
                case 1:  
                    //console.log( "xhr请求已打开" );  
                break;  
                case 2:  
                    timeout1 = new Date();  
                    //console.log( "xhr请求已发送" );  
                break;  
                case 3:  
                    timeout2 = new Date();  
                    console.log( "xhr请求已响应,耗时:"+(timeout2.getTime()-timeout1.getTime()));  
                    break;  
                case 4:  
                    //console.log( "xhr请求已完成");  
                    if ( xhr.status == 200 ) {  
                        console.log( "xhr请求成功("+param.url+"):"+xhr.responseText );  
                        if(param.cache){  
                            if(param.expire){  
                                myStorage.setItem(param.url,xhr.responseText,param.expire);  
                            }else{  
                                myStorage.setItem(param.url,xhr.responseText);  
                            }  
                        }  
                        try {  
                            var data = JSON.parse(xhr.responseText);  
                            if("false" == data.auth_login && "true" == data.refresh_token){//所有接口都要验证用户是否登陆,如果没登陆则直接跳到登陆界面  
                                myStorage.setItem("token","guest");  
                            }  
                        } catch (e) {  
                            console.log(e);  
                        }  

                        if("function" == typeof param.sucess){  
                            param.sucess(xhr.responseText)  
                        }  
                    } else {  
                        console.log( "xhr请求失败:"+xhr.status );  

                        if("function" == typeof param.error){  
                            param.error(xhr);  
                        }  
                    }  
                    break;  
                default :  
                    break;  
            }  
            xhr.ontimeout = function(){  
                console.log( "xhr请求超时:");  
                plus.nativeUI.alert("请求超时,请重试!");  
                plus.nativeUI.closeWaiting();  
            }  
        }  
        var token = myStorage.getItem("token");//用户请求标识  
        if("post" == param.type.toLowerCase()){  
            param.data['token'] = token;  
            xhr.open( param.type, param.url );  
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  
            //xhr.send('user=HBuilder&test=value');  
            xhr.send($.param(param.data));  
        }else{  
            if(param.url.indexOf("?") > -1){  
                param.url += "&" + $.param(param.data) + "&token="+token;  
            }else{  
                param.url += "?" + $.param(param.data)+ "&token="+token;  
            }  
            if(param.cache && "get" == param.type.toLowerCase() && myStorage.getItem(param.url) && !param.refreshCache){//如果启用了缓存属性,则直接读取缓存  
                if("function" == typeof param.sucess){  
                    param.sucess(myStorage.getItem(param.url));  
                    console.log("读取数据缓存url:"+param.url);  
                    return xhr;  
                }                 
            }  
            xhr.open( param.type, param.url );  
            xhr.send();  
        }  

        return xhr;  
    }
2016-08-01 10:14 1 条评论 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

非必要不建议使用plus.net,而是使用标准浏览器的ajax。
因为plus的所有api,都是一个从webview到原生层的桥通信,这个桥是有损耗的。
如果标准ajax能执行,那么使用标准ajax就好了。
标准ajax大多也是能跨域的。
使用mui.ajax时会自动判断是否需要plus.net的跨域请求。

  • wenju

    意思是用APP上最好用mui.ajax对吗

    2016-10-09 09:58

  • wenju

    mui.ajax最终还是用的 plus.net.XMLHttpRequest()吧

    2016-10-09 09:59

3***@qq.com

3***@qq.com (作者) - 逻辑天下

就没个人出来回复下吗,,这么严重的问题难道只有这里出现??

YIRIUS

YIRIUS

我也发现了。可能是手机访问api的确发起请求就是慢一拍。测试过淘宝抓包么?看是手机发起请求的问题还是hbuilder的问题

wenju

wenju - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件

大神 问一下
xhr.ontimeout = function(){}你是写在xhr.onreadystatechange = function () {}里面 执行会不会又问题; 超时会走xhr.ontimeout = function(){}吗

张一三

张一三

同遇此问题

该问题目前已经被锁定, 无法添加新回复