ajax success then,javascript - jQuery AJAX relation between success and .then - Stack Overflow

I'm trying to solve a very simple problem, but I can't figure it out.

I have following code:

TEST

var counter = 0;

function test() {

return $.ajax({

url: "https://127.0.0.1:4432",

success: function(html){

console.log('success! test');

},

error: function() {

if (counter++ < 3) {

console.log("Retrying");

$.ajax(this);

return;

}

console.log('ERROR! test');

}

});

}

function run() {

test()

.then(

function(){console.log('finished ALL OK')},

function() {console.log('finished all ERROR')

;});

}

What I want to achieve is that after clicking on the button, the AJAX request will be sent to server. In case of failure of the AJAX the request will be retried. Only after all retries will be finished, then the success or failure in the ".then" function will be called .

At this moment, the code behaves like that the AJAX call is retried three times, but the ".then()" handler is called right after first failure.

In console of the browser it looks like this:

I would like to see the "finished all ERROR" text at the end after all retries.

Hope this makes sense and I will be grateful for any help.