jQuery链接和级联然后是什么时候

我目前在我面前有一个非常棒的if-then-else循环，它首先从web服务获得多个cantinas。 然后它会获得所有可用餐点（每个菜单）和所有可用的配菜（每个菜单）。 对于每一餐和两餐，然后检查所有添加剂并聚集它们。

最后， 我有多种菜单，包括餐点，配菜和所有添加剂。

以下流程图显示了该过程：

我想美化代码，并希望利用jQuery的promises – 但我无法弄清楚如何做到这一点，因为我必须在一段时间之后堆叠一个（至少我认为，也许我必须resolve ？） 。 以下是我最好的尝试：

 //this totally does not work at all, but you get the idea what I want to do Menus.getCantinas() .when(Menus.getMeals(cantinas), Menus.getSides(cantinas)) //when doesn't exist here, neither does cantinas .then(Menus.getAdditives(meals, sides) //also throws errors as meals and sides does not exist .done(function(cantinas, meals, sides, additives) { //more errors for the people Menus.cantinas = cantinas; Menus.meals = meals; Menus.sides = sides; Menus.additives = additives; //... some html stuff to build the menus }); 

请务必查看以下代码段以获取更多解释性代码。

 window.Menus = { cantinas = {}, meals = {}, sides = {}, additives = {}, callWebservice: function (listname, filter) { if (filter && filter != '') data['$filter'] = filter; return jQuery.ajax({ url: '/_api/web/lists/getbytitle(\'' + listname + '\')/items', data: data, dataType: 'json' }); }, getCantinas: function() { return Menus.callWebservice("Cantinas", ""); }, getMeals: function(cantinas) { var filterString; for (var i = 0; i < cantinas.length; i++) { if (i == 0) { filterstring = "ID eq " + cantinas[i]; } else { filterstring += " or ID eq " + cantinas[i] } } return Menus.callWebservice("Meals", filterString); }, getSides: function(cantinas) { //see above function for filterstuff return Menus.callWebservice("Sides", filterString); }, getAdditives: function(meals, sides) { for (var i = 0; i < meals.length; i++) { if (i == 0 && !meals) { filterstring = "ID eq " + meals[i]; } else { filterstring += " or ID eq " + meals[i] } } for (var i = 0; i < sides.length; i++) { if (i == 0 && !sides) { filterstring = "ID eq " + sides[i]; } else { filterstring += " or ID eq " + sides[i] } } return Menus.callWebservice("Additives", ""); } Init: function() { //this totally does not work at all, but you get the idea what I want to do Menus.getCantinas() .when(Menus.getMeals(cantinas), Menus.getSides(cantinas)) .then(Menus.getAdditives(meals, sides) .done(function(cantinas, meals, sides, additives){ Menus.cantinas = cantinas; Menus.meals = meals; Menus.sides = sides; Menus.additives = additives; //... some html stuff to build the menus }); } } Menus.Init() 

我希望我有意义吗？ 如何使用承诺和级联参数从一个到另一个，基本上如何使上述声明工作，让我多个菜单与多餐，边和添加剂。

Answer 1

就像评论中说$.when是一个免费function。 如果我们使用then能够链接，我们可以在这里得到非常干净的语法。

 Menus.getCantinas().then(function(cantinas){ // `then` is how we chain promises Menus.cantinas = cantinas; // if we need to aggregate more than one promise, we `$.when` return $.when(Menus.getMeals(cantinas), Menus.getSides(cantinas)); }).then(function(meals, sides){ // in jQuery `then` can take multiple arguments Menus.sides = sides; // we can fill closure arguments here Menus.meals = meals; return Menus.getAdditives(meals, sides); // again we chain }).then(function(additives){ Menus.additives = additives; return Menus; // we can also return non promises and chain on them if we want }).done(function(){ // done terminates a chain generally. // edit HTML here });