Question

我正在进行ajax调用以获取html数据并将其附加到我的容器中。我还需要以特定顺序呈现html。我试图采取加载所有内容的方法，然后根据需要重新排序，但遇到困难，让顺序解决调用（即渲染，然后命令html）。

代码（为简洁起见编辑）：

var components = ["comp1","comp2","comp3"];

function setup() {
    var deferredComponentAdds = [];
    $.each(components, function (i, componentId) {
        deferredComponentAdds.push(
            addComponent(componentId)
        );
    });
    $.when.apply($, deferredComponentAdds).then(fixComponentOrder());
}

function addComponent(componentName) {
    return $.ajax({
        type: "GET",   
        url: "/LoadViewComponent?viewComponent=" + componentName,
        success: function(data) {
            $('#components').append(data);
        }
    });
}

function fixComponentOrder() { /* ordering logic */ }

我有两个问题。首先，在addComponent（）。成功结果处理之前调用fixComponentOrder（）。其次，在每次addComponent（）调用之后调用fixComponentOrder（）（这不会破坏任何东西，但它是不必要的）。

我需要调用addComponent（）并解决所有调用的成功，然后在调用并解析所有调用之后，最后调用一次fixComponentOrder（）。

我也可以在我的成功函数中抛出fixComponentOrder（），但是我仍然有第二个问题，每次都调用它是非最佳的。

谢谢，

杰夫

Answer 1

我还没有测试它，但逻辑应该使用promise

我们执行另一个函数后执行addComponent()

 const addComponent = componentName => { 
    return new Promise(resolve =>{
        console.log("Hello1")
        return $.ajax({
        type: "GET",   
        url: "/LoadViewComponent?viewComponent=" + componentName,
        success: function(data) {
            $('#components').append(data);
          resolve()
        }
         });  
       })
    }

    function fixComponentOrder(){
    return addComponent(componentName).then(()=>{/*Your next function to execute*/})
    }

     fixComponentOrder()

执行fixComponentOrder()后，它将通过执行addComponent()开始，一旦解决它将执行您在then

中执行的任何功能

Answer 2

我最近不得不做类似的事情

var arrOfObj = []
$.ajax({
  type: "GET",
  url: "/LoadViewComponent?viewComponent=" + componentName,
  success: function (data) {
    arrOfObj.push(data)
    render()
  }
});


render(){
  var ordering = { 'Shirts': 0, 'Pants and Shorts': 1, 'Hats': 2, 'Accessories': 3, }
  $('#components').empty()
  arrOfObj.sort(function (a, b) {
    return (ordering[a.name] - ordering[b.name]) || a.name.localeCompare(b.name);
  }).forEach(function (obj) {
    $('#components').append(obj);
  });
}

确保订购密钥与组件名称匹配。我修改了我正在使用的代码，因此请确保在使用之前对其进行测试：）

如何单独处理多个ajax调用以及最终结果

2 个答案: