Rewite fetch function in jQuery.ajax()

Question

The current solution using fetch

We currently have this function implemented and working perfectly.

function setupCKConnect() {

    fetch('ajax/myfile.php?id=1234567')
        .then(response => { 
            response.json()
        .then(json => {
            function1(json)
        .then(data => {
            function2()
        })
        .catch(data => {
            setupCKConnect()
        });
      });
    });

  };

An explanation of the above code

• The ajax call to myfile.php retrieves a json response used in the function1().
• function1() then listens for a callback from another fucntion (sometimes for up to 10 minutes)
• After function1() receives the callback and is executed, function2() polls the database for a result.

Why we need to change

Unfortunately it seems that a significant percentage of our client base use devices which do not support fetch.

Therefore I am trying to rewrite this using jQuery.ajax().

I know this seems like going backwards, but it is necessary in this case.

The new code

Below is the code I have so far. Note that Im not married to jQuery for this is someone has a better option.

So far I have this code:

function setupCKConnect() {

    $.ajax({
        type: "GET",
        dataType: 'json',
        url: 'ajax/myfile.php?id=1234567'
    }).done(function(data) {  
        function1(data)
    }).done(function() {  
        function2()
    }).fail(function(jqXHR, textStatus, errorThrown) {  
        setupCKConnect()
    });

};

The Problem with the new code

The new code actually works well except for one small point

• function2() executes immediately, rather than waiting for function1() to complete.

Can anyone help in explaining how to stop function2() executing before function1() has completed

Assistance appreciated

Answer 1

So the ajax response returns a deferred object and not a promise. These look similar, but mixing the two can be wonky. I've created a js fiddle based on the deferred.done documentation to illustrate what I mean.

I would venture to guess that function1(json) returns a promise. The deferred gets a value back (the unresolved promise) and thinks "great lets move on" You either need to async/await or call then on that function call for the execution to pause for anything else.

Answer 2

If you fix the indentation of your original code, you'll see the problem. The call to function2() is not in a .then() that's chained to the first .then() , it's called on the result of function1() . And .catch() is also called from there, not from fetch() , so you can't use .fail() as a replacement.

function setupCKConnect() {
  fetch('ajax/myfile.php?id=1234567')
    .then(response => {
      response.json()
        .then(json => {
          function1(json)
            .then(data => {
              function2()
            })
            .catch(data => {
              setupCKConnect()
            });
        });
    });
};

So you need to structure the jQuery code similarly.

function setupCKConnect() {
    $.ajax({
        type: "GET",
        dataType: 'json',
        url: 'ajax/myfile.php?id=1234567'
    }).done(function(data) {  
        function1(data)
            .then(function(data) {
                function2()
            })
            .catch(function() {  
                setupCKConnect(data)
            });
    })
};

This assumes that function1() is similar to the original version, so it returns a promise just like that does.