如何正确处理ajax超时

Question

例如，用户想要登录，连接很慢或者请求被卡在某个网络中，然后用户等待，但有时重新发送请求比等待更好。

问题：

• 理想的等待时间是多少？ （没有上传文件，只是 简单登录）我设置了 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）自动重试（代码）

$.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）其他一些选择

Answer 1

你可以两者都做，尝试2次然后失败：

$.ajax({
    url: '{{ url('/login') }}',
    data: data,
    method: 'POST',
    timeout: 5000, // Set timeout to 5000ms (5 seconds)
    retryCount: 0, // Number of retries, starts at 0
    retryLimit: 1, // The maximum number of retries
    success: function(data) {
        // do stuff
    },
    error: function(data, status, error) {
        if (status === "timeout") {
            this.retryCount++;
            if (this.retryCount <= this.retryLimit) {
                console.log("Retrying");
                $.ajax(this);
            } else {
                alert('Timeout');                       
            }
            return;
        }
        // Handle other errors...
    }
});

Answer 2

默认的服务器超时时间是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 [email protected]'); // Use pretty modal instead
    }
})

Answer 3

您可以使用像 https://github.com/inmar/patience_js 这样的库，它可以让您定义重试策略并使代码更加简洁。

或者更好的是看看RxJS

您可以使用此处建议的方法：RxJS 重试运算符与 ajax 调用

const doLogin = () => {
    console.log('calling');
    return $.ajax('...')
};

const stream = Rx.Observable.fromPromise(doLogin).retry(3);

stream.subscribe(log);