AJAX中的订单问题

Question

I have the following code that loops through each RSS XML feed URL and render each feed blog entry when it's all finished. On each success ajax call the channel is pushed to xmlDocs array, because ajax is async operation, the result is not in an order I wanted. I can set async: false but this is not a good practice and deprecated across all major browsers. What is a workaround to get this in sync manner? If this is a duplicated question, please point me to the answered question. Many thanks!

for (let url in $urls) {
   if (!$urls.hasOwnProperty(url)) continue;
   feedUrls.unshift($urls[url]);
}

feedUrls.forEach((url) => {
   ajaxRequests.push(
      $.ajax({
         method: "GET",
         url: url,
         success: (xml) => {
            let channel = xml.getElementsByTagName("channel")[0];
            xmlDocs.push(channel);
         },
         error: () => {
            $cxNetworkError.removeClass("x-hidden");
         }
      })
   );
});

$.when.apply(null, ajaxRequests).then(() => {
   createBlogEntry(xmlDocs);
});

Answer 1

You may use counter to make xmlDoc array in sync with ajaxRequests.

It may look like this (not tested):

var i = 0; feedUrls.forEach((url) => { ajaxRequests.push( $.ajax({ method: "GET", url: url, success: (xml) => { let channel = xml.getElementsByTagName("channel")[0]; xmlDocs[i++] = channel; // note this! }, error: () => { $cxNetworkError.removeClass("x-hidden"); } }) ); }); ... i = 0; $.when.apply(null, ajaxRequests).then(() => { createBlogEntry(xmlDocs); });