How to use javascript promises that waits for jquery ajax to finish before moving onto next promise?

 bookmakers = [
                "bet365","skybet","ladbrokes","williamhill","betfred","paddypower","sportingbet","betvictor","unibet","totesport","coral","boylesports","betstars","blacktype","betfair","betway","betbright","32red","10bet","marathonbet","118bet","888sport","stanjames","winner"
            ];

 function doSomethingAsync(value, dabookie) {
  return new Promise((resolve) => {
    setTimeout(() => {
        ///////////////////
        console.log("get ajax for "+dabookie);
        tasking = "";
        dataString = "";

        $.ajax({
        type: "POST",
        url: "testscraperules.php?task="+dabookie,
        data: dataString,
        cache: false,
        timeout: 6000,
        statusCode: {
            404: function() {
                //alert("Error 404");
                $("."+dabookie+" td").addClass("yellowback");
                $("."+dabookie+" .loading").replaceWith("<img src='cross.png' width='24' height='24' />");
            },
            503: function(){ // Service Unavailable (server access throttling)
                $("."+dabookie+" td").addClass("magentaback");
                $("."+dabookie+" .loading").replaceWith("<img src='cross.png' width='24' height='24' />");
                //alert("Error 504 Gateway Timeout when accessing \n testscraperules.php?task="+dabookie);
            },
            504: function(){ // Gateway Timeout
                $("."+dabookie+" td").addClass("purpleback");
                $("."+dabookie+" .loading").replaceWith("<img src='cross.png' width='24' height='24' />");
                //alert("Error 504 Gateway Timeout when accessing \n testscraperules.php?task="+dabookie);
            }
        }, success: function(html){

            // alert("bookmaker in success is \n"+dabookie);

            var jsonstring = $(html).filter("textarea").val(); //alert(jsonstring);
            if(jsonstring == ""){
                $("."+dabookie+" td").addClass("amberback");
                $("."+dabookie+" .loading").replaceWith("<img src='cross.png' width='24' height='24' />");
            }
            jsonstring = "{ \""+dabookie+"\": [ "+jsonstring+" ] }"; //for multiple results 6 horses x 25 bookmakers

            console.log(jsonstring); 

        }, error: function(XMLHttpRequest, status, message){
        }
        });

        //////
      console.log("Resolvingx " + dabookie);
      resolve(value);
    }, Math.floor(Math.random() * 1000));
  });
}

    function test() {
      let i;
      let promises = [];
      console.log(bookmakers.length);
      for (i = 0; i < bookmakers.length; ++i) {
        promises.push(doSomethingAsync(i, bookmakers[i]));
      }

      Promise.all(promises)
          .then((results) => {
            console.log("All done", results);
          })
          .catch((e) => {
              // Handle errors here
          });
    }

    // test();

    $(".goscrape").click(function (){
        test();
    });

As you can see from the Console, the ajax is preventing the promises from running in order. It should wait until one promise is finished before moving onto the next one.

What is going on

Solution

you could do something with recursion like this if you want to make sure that the promises run in order:

function test() {
  runPromise(0);
}

function finish(err) {
  if (err) console.log(err);
  console.log('finished!');
}

function runPromise(index) {
  // jump out of loop if there are no more bookmakers
  if (index >= bookmakers.length) return finish();

  doSomethingAsync(index, bookmakers[index]).then((value) => {
    // do something with the value
    // ...
    // iterate to the next promise
    runPromise(index + 1);
  }).catch((err) => {
    // break out of loop when an error occurs
    finish(err);
  });
}