使用jQuery延迟并答应内部循环 [英] Using jQuery deferred and promise inside loop

问题描述

这就是我要实现的目标，

This is what i am trying to achieve,

我有一个排序数组，每个数组都传递给jQuery.在每个内部都有一个ajax调用，它将获取我想要的数据，并且每次推入另一个数组时(将其称为allJsonData).最后，我显示allJsonData. 问题是每当我显示allJsonData时，元素始终显示不一致(不是按字母顺序/随机顺序显示).我期望allJsonData按字母顺序显示(即AList数据第一，BList数据第二，CList数据第三，依此类推). 我是jQuery推迟和承诺的新手.预先感谢.

I have a sorted array which i pass to jQuery each. Inside each there is an ajax call which will fetch me the desired data and every time push into another array(lets call it allJsonData). Finally i display allJsonData. Problem is whenever i display allJsonData, elements are always displayed inconsistently (not alphabetically/random order). I am expecting allJsonData to be displayed alphabetically (that is AList data first, BList data second, CList data third and so on). I am new to jQuery deferred and promise. Thanks in advance.

var sortedArray = [AList, BList, CList, DList];
var promises = [];
var allJsonData = [];
$.each(sortedArray, function (index, value) {
var dfd = $.Deferred();
var url = _spPageContextInfo.webAbsoluteUrl  + ('/_api/Web/Lists/GetByTitle(' + "'" + value + "'" + ')/Items? + "SomeFilterParameters";

//AJAX CALL HERE//
.done(
  function (approvedListItems) {
    if (approvedListItems.d.results.length != 0) {
      $.each(approvedListItems.d.results, function (i, col) {
        allJsonData.push(col);//Push into master array
      });
    }//If closed
    dfd.resolve(allJsonData);
  }
);//Done closed
  promises.push(dfd);
});//jQuery Each closed
return $.when.apply($, promises).promise();

/**** AJAX呼叫****/

/****AJAX CALL****/

getListItems: function(url) {       
  var dfd = $.Deferred();
    $.ajax({
      url: url,
      type: "GET",
      headers: {
        "accept": "application/json;odata=verbose",
      },
    success: function (data) {
      dfd.resolve(data);
    },
    error: function (error) {
      dfd.reject(sender, args, "Error retrieving items");
    }
  });
  return dfd.promise();         
},

推荐答案

我认为您可以做些简单的事情:

I think you can do something as simple as this:

var sortedArray = [AList, BList, CList, DList];

Promise.all(sortedArray.map(function(value) {
    var url = ...;
    return getListItems(url);
})).then(function(results) {
    // results is an array of results from AList, BList, CList, DList in order
    let allJsonData = [];
    results.forEach(function(approvedListItems) {
        allJsonData.push.apply(allJsonData, approvedListItems.d.results);
    });
    // process allJsonData here
});

// simplify getListItems like this
getListItems: function(url) {       
    return $.ajax({
        url: url,
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        }
    });
},

这里的总体思路是，为sortedArray中的每个项目获取一个原始列表(不处理其中的子结果).使用Promise.all()或$.when()，您将按顺序获取原始列表.然后，在拥有所有原始列表之后，可以按顺序处理它们并按顺序构建allJsonData结构.

The general idea here is that you get a raw list (without processing the sub-results inside of it) for each of the items in sortedArray. Using either Promise.all() or $.when(), you will get the raw lists in order. Then, after you have all the raw lists, you can process them in order and build your allJsonData structure in order.

此外，您可以从getListItems()中删除promise反模式. $.ajax()已经返回了一个承诺，因此无需将其包装在另一个承诺中.

Also, you can remove the promise anti-pattern from getListItems(). $.ajax() already returns a promise so there is no need to wrap it in another promise.

如果您确实愿意，可以将其转换为使用$.when()而不是Promise.all()，但是使用$.when()更为复杂，因为它采用参数并返回结果的方式.

You could convert this to use $.when() instead of Promise.all() if you really wanted to, but it is more complicated to use $.when() because of how it takes arguments and returns results.

此外，您的url变量中的Javascript字符串语法也有问题.我不知道您打算在那里做什么，所以我不确定建议什么，但是您也需要解决该问题.

Also, there's something wrong with the Javascript string syntax in your url variable. I don't know what you intended to do there so I'm not sure what to suggest, but you need to fix that too.

这篇关于使用jQuery延迟并答应内部循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！