javascript - 如何使用 javascript promise 等待 jquery ajax 完成然后再进行下一个 promise ？

Question

如何使用 JavaScript Promise 等待 jquery ajax 完成后再进行下一个 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();
    });

正如您从控制台中看到的那样，ajax 阻止了 Promise 按顺序运行。它应该等到一个 promise 完成后再进行下一个 promise 。

这是怎么回事

Answer 1

如果你想确保 Promise 按顺序运行，你可以使用这样的递归来做一些事情:

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);
  });
}