Handling HTTP request time out by browser in Javascript

Question

In my web application, I am trying to handle time out situations when calling a REST API. Here is my code which calls the API using jQuery ajax.

$.ajax({
            type: "POST",
            url: endpoint,
            data: payload,
            dataType: dataType,
            timeout: 0,
            success: successHandler,
            error: failureHandler
        });

The success and failure handlers are shown below.

function successHandler(data) {
    //Got the data 
}

function failureHandler(xhr, textStatus, thrownError) {
    if(xhr.status==404) {
      console.log('Page not found');
    } else if(xhr.status==408) {
      console.log('request timed out at server. You may want to retry') ;    
    } 
}

If the timeout happens at the server, it is giving status 408. But sometimes, due network connectivity problems, the client (browser) itself is getting timed out because it is not able to connect to the service in specified time. I guess this is the browser behavior. What will be xhr.status and textStatus if the request gets timed out by the browser? How to handle this scenario?

[Edit] I found some explanation in Set timeout for ajax (jQuery). This explains how we can set timeout in the code. But my question is that I don't want to set timeout like this. Check the code in ajax request, I set timeout: 0 which means, there is no timeout and I am going to wait till I get the response from the server. Meanwhile, the browser may kill this request because of it's global timeout setting. I am looking for a solution which can handle this.

Answer 1

This looks like it is a very similar question to this post. Good luck! How to detect timeout on an AJAX (XmlHttpRequest) call in the browser?