如何正确处理ajax超时

时间:2017-12-13 07:44:47

标签: javascript jquery ajax

例如,用户想要登录,连接速度慢或请求被卡入某个网络,然后用户等待,但有时候更好地重新发送请求而不是等待。

问题:

  • 理想的等待时间是多少? (没有上传文件,只是 简单的登录)我已经放了15秒,但也许它太多了。
  • 什么是最好的解决方案?

1)让用户等待,直到他决定再次点击登录

2)设置ajax超时

$.ajax({

url: '{{ url('/login') }}',
data: data,
method: 'POST',
timeout: 15000, 

并显示错误

error: function(data, status, error){

if(status==="timeout") {
var errorString = 'Please retry. Ref Timeout';                      
}

3)进行自动重试(code

$.ajax({
url : 'someurl',
type : 'POST',
data :  ....,   
tryCount : 0,
retryLimit : 3,
...
error: function(data, status, error){
    if (status == 'timeout') {
       this.tryCount++;
       if (this.tryCount <= this.retryLimit) {
       //try again
           $.ajax(this);
           return;
       }            
       return;
    }

4)使用ajax上的包装函数

setTimeout(function(){
    $.ajax({...})
}, 15000);

5)Some other options

3 个答案:

答案 0 :(得分:1)

默认服务器超时为30秒,因此在Ajax中它是正确的超时。

不要通过重新登录来轰炸服务器(如果它太忙了,你会让它变得更糟)。

请求待处理时,不允许用户再次单击“登录”按钮。

IMO 应该有没有超时的ajax,如果出错,你应该告诉用户稍后再试。

$.ajax({
    error: function (response) {
        console.error(response); // Show error response to dev

        alert('Something went wrong. Please try again later or contact administrator admin@email.com'); // Use pretty modal instead
    }
})

答案 1 :(得分:1)

我个人会做一个混合,这意味着,尝试2次和秋天,你可以使用这个代码:

$.ajax({

    url: '{{ url('/login') }}',
    data: data,
    method: 'POST',
    timeout: 10000, // sets timeout to 5000 = 5 seconds
    retryCount: 0, // start retry count
    retryLimit: 1, //will let you retry a determined number of times

error: function(data, status, error){       

if(status==="timeout") {
    this.retryCount++;
    if (this.retryCount <= this.retryLimit) { //&& Date.now() - this.created <  this.retryTimeout
        console.log("Retrying");
        $.ajax(this);
        return;
}
else{
    var errorString = 'Timeout';                        
}

答案 2 :(得分:0)

您可以使用像https://github.com/inmar/patience_js这样的库来定义重试策略并使代码更清晰。

或者更好的是看看RxJS

您可以使用类似于此处建议的方法:RxJS retry operator with ajax call

rbRatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {

                Float ratingVal = (Float) rating;
                Float ratingvalue = (Float) rbRatingBar.getRating();
                Toast.makeText(getApplicationContext(), " Ratings : " + String.valueOf(ratingVal) + "", Toast.LENGTH_SHORT).show();
                Toast.makeText(getApplicationContext(), " Ratings1 : " + ratingvalue + "", Toast.LENGTH_SHORT).show();
            }
        });