Downloading an Ajax file returns status code 0 ready state 0 (only sometimes)

Question

I looked at the next stream

jQuery Ajax - Status Code 0?

However, I could not find a definitive answer, and I had serious problems finding the source of my problem, so I am posting here in the hope that someone can point me in the right direction.

In my code, I execute an Angular HTTP message that just sends the underlying JSON data, and then in the on success callback I use AJAX to upload the files to the same server. (I know that I should not use jQuery and Angular, but I cannot change this at the moment)

It looks something like this.

var deferred = $q.defer() // first post $http.post(url,payload,{params: params, headers: headers) .then(function(response) { uploadFiles(response,deferred); // I am also sending google analytics events here }, function(error) { // do error stuff } return deferred.promise; // upload files function function uploadFiles(response,deferred){ $ajax({ type: 'POST', processData: false, contentType: false, data: data // this new FormData() with files appended to it, url: 'the-endpoint-for-the-upload', dataType: 'json', success: function(data) { // do success stuff here deferred.resolve(data); }, error: function(jqXHR, textStatus, errorThrown) { var message = {}; if (jqXHR.status === 0) { message.jqXHRStatusIsZero = "true"; } if (jqXHR.readyState === 0) { message.jqXHRReadyStateIsZero = "true"; } if (jqXHR.status === '') { message.jqXHRStatusIsEmptyString = "true"; } if (jqXHR.status) { message.jqXHRStatus = jqXHR.status; } if (jqXHR.readyState) { message.jqXHRReadyState = jqXHR.readyState; } if (jqXHR.responseText) { message.jqXHR = jqXHR.responseText; } if (textStatus) { message.textStatus = textStatus; } if (errorThrown) { message.errorThrown = errorThrown; } message.error = 'HTTP file upload failed'; logError(message); deferred.resolve(message); } } }) } 

Not my exact code, but almost the same.

The problem is that it works almost all the time, but maybe three or four out of every few hundred will fail. By mistake, I mean that the error handler function is called in the file upload function, and the files do not load.

I get jqXHRStatus 0 and jqXHRReadyState 0 when this happens.

The only way I can replicate the problem is to click the update in the browser when processing the request, however, users have reported that they do not (although 100% confirm this)

Perhaps there is a serious flaw in my code that I don't see? Maybe passing a pending variable around is not good practice? Or another way to invalidate an ajax request that I am not considering? Can Google analytics events be sent simultaneously?

Any advice would be great and please let me know if you would like more information on this issue.

Answer 1

This means that the request has been canceled.

There can be many different reasons for this, but keep in mind: it could also be due to a bug or browser problem - so I believe (IMHO), there is no way to prevent such problems.

Think, for example, you get a response of 503 (service not available). What would you do then? This is also a sporadic and unpredictable problem. Just keep that in mind and try re-arranging your data.

Without reinventing the wheel, I suggest you implement: Retrying ajax call using deferred api

Answer 2

I assume that your code is executed before it actually returns from the call. That is, the call returns and nothing returns, and it gives an error of 0. This makes sense because the error is a variable. Most of the time, he would return well, because the backend was fast enough, but sometimes it wasn’t because it took a particularly long time, or something else happened, etc. Javascript never REALLY stops execution. He says what he does, but especially going between angular and jquery with multiple ajax requests. It would not be surprising if he made a second ajax call before he actually completed your angular entry. This is why the update will replicate the error as it will clear your variables.

Some things you can do to check this out are:

• On the backend, make a timer that goes for a few seconds before it returns anything. This is likely to make your code more robust.

• Set breakpoints and see when they get there, and the values ​​they contain in javascript.

Good luck