javascript - How to correctly handle ajax timeouts - Stack Overflow

admin管理员组

文章数量:1388877

For example, a user want to login, the connection is slow or the request is stuck into some network , then the user waits, but sometimes is better resend the request than waiting.

Questions:

• What would be the desirable waiting time? (no uploading files, just simple login) I've put 15 secs, but maybe it's too much.
• What's the best solution?

1) Keep the user waiting till he decides to click login again

2) Set an ajax timeout

$.ajax({

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

and display them an error

error: function(data, status, error){

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

3) do an auto retry (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) Use a wrapper function over the ajax

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

5) Some other options

For example, a user want to login, the connection is slow or the request is stuck into some network , then the user waits, but sometimes is better resend the request than waiting.

Questions:

• What would be the desirable waiting time? (no uploading files, just simple login) I've put 15 secs, but maybe it's too much.
• What's the best solution?

1) Keep the user waiting till he decides to click login again

2) Set an ajax timeout

$.ajax({

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

and display them an error

error: function(data, status, error){

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

3) do an auto retry (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) Use a wrapper function over the ajax

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

5) Some other options

• javascript
• jquery
• ajax

Share Improve this question Follow asked Dec 13, 2017 at 7:44 TrOnNeTrOnNe 1,7821616 silver badges3333 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can do both, try 2 times and then fail:

$.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...
    }
});

Default server timeout is 30s, so it's proper timeout in Ajax.

Don't bombard server with re-logins (if it's too busy, you make it even worse).

Do not allow user to click login button once more while request is pending.

---

IMO there should be ajax without timeout and on error you should tell user to try again later.

$.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
    }
})

You could you a library like https://github./inmar/patience_js that lets you define retry strategies and keep your code a lot cleaner.

Or better yet take a look at RxJS

where you can use an approach like the one suggested here: RxJS retry operator with ajax call

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

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

stream.subscribe(log);

本文标签： javascriptHow to correctly handle ajax timeoutsStack Overflow