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

Dennis G 发表于 Dev

丹尼斯·G。

目前，我面前有一个巨大的if-then-else循环，该循环首先从Web服务获取多个容器。然后，它获取所有可用的餐点（针对每个菜单）和所有可用的配菜（针对每个菜单）。然后，对于每餐以及每餐，都要检查所有添加剂并将其汇总。

最后，我有多个菜单，包括餐点，配菜及其所有添加剂。

以下流程图显示了该过程：
在此处输入图片说明

我想美化代码，并想在jQuery中使用Promise-但我不知道该怎么做，因为我必须在athen之后堆叠when（至少我认为，也许我必须这样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()

我希望我有道理？如何使用Promise和从上到下的级联参数，以及基本上如何使上述声明起作用，并为我提供包含多餐，多方食物和添加剂的多个菜单。

本杰明·格伦鲍姆（Benjamin Gruenbaum）

像评论说的$.when是一个免费功能。如果我们使用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
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。