Question

我有以下代码循环遍历每个RSS XML提要URL，并在所有提要完成后呈现每个提要博客条目。在每次成功ajax调用时，channel被推送到xmlDocs数组，因为ajax是异步操作，结果不是我想要的顺序。我可以设置async: false，但这不是一个好习惯，并且在所有主流浏览器中都已弃用。以同步方式获得此解决方法的原因是什么？如果这是一个重复的问题，请指出我回答的问题。非常感谢！

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

您可以使用计数器使xmlDoc数组与ajaxRequests同步。

它可能看起来像这样（未经测试）：

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

Answer 2

我想出了一个解决方法。

let requestIndex = 0;

let ajaxRequest = function (url) {
   $.get(url).done((xml) => {
      let channel = xml.getElementsByTagName("channel")[0];
      xmlDocs.push(channel);

      requestIndex++;

      if (requestIndex < feedUrls.length) 
         ajaxRequest(feedUrls[requestIndex]);
      else
         createBlogEntry(xmlDocs);
   }).fail(() => {
      $cxNetworkError.removeClass("x-hidden");
   });
};

// Initialize the first ajax request
ajaxRequest(feedUrls[requestIndex]);

AJAX中的订单问题

2 个答案: