jquery推迟返回太早了

Question

我有以下代码：

$.when(multipleQueries(stateQueries, rowData))
.then(function (data) {
//do stuff with data - removed for brevity

多重查询函数如下：

function multipleQueries(queriesToExecute, rowData) {
var allQueriesMapped = $.Deferred();
// If a single query has been provided, convert it into an array
if (Array.isArray(queriesToExecute) === false) {
queriesToExecute = [].concat(queriesToExecute);
}
// Create a function for each region to run the query.
$.when.apply($, $.map(queriesToExecute, function (query) {
// Execute the query in the region
return $.when(executeQuery(query.InstanceInfo, query.Query)).then(function (data) {
var isDataMapped = $.Deferred();
var mappedData = [];
// Perform some data transformation
$.when.apply($, $.map(data.results, function (value) {
var properties = value.succinctProperties;
//code removed for brevity
return $.when(mapData(properties)).then(function (mappedRow) {
if (mappedRow) {
mappedData.push(mappedRow);
}
});
})).then(function () {
isDataMapped.resolve({
results: mappedData,
numItems: mappedData.length
});
});
return isDataMapped.promise();
}).then(function (data) {
debugger;
allQueriesMapped.resolve(data);
});
}));
return allQueriesMapped.promise();
}

我遇到的问题是我正在传入 5 个查询以执行到 multipleQuery 函数，但它在运行第一个查询后命中调试器行 - 然后解析 allQueryMapped 延迟，然后它返回到带有调用它的数据的 do 东西，但由于我没有我传入的 5 个查询的所有数据，我没有看到预期的行为 - 我如何设定这些承诺是否缺少什么？

注意 - 我尝试将调试器之前的 .then 更改为 .done，但行为相同，并且还尝试将调用代码更改为 .done，如下所示，但也得到相同的结果。

$.when(multipleQueries(stateQueries, rowData))
.done(function (data) {
//do stuff with data - removed for brevity

** 更新 - 执行查询功能如下

function executeQuery(instanceInfo, query) {
return $.ajax({
url: instanceInfo.Url,
type: 'GET',
data: {
q: query,
succinct: true
},
processData: true
});
}

Answer 1

正如freedomn-m和charlietfl指出的那样，这个then在错误的地方(见***评论(：

function multipleQueries(queriesToExecute, rowData) {
var allQueriesMapped = $.Deferred();
// If a single query has been provided, convert it into an array
if (Array.isArray(queriesToExecute) === false) {
queriesToExecute = [].concat(queriesToExecute);
}
// Create a function for each region to run the query.
$.when.apply($, $.map(queriesToExecute, function(query) {
// Execute the query in the region
return $.when(executeQuery(query.InstanceInfo, query.Query)).then(function(data) {
var isDataMapped = $.Deferred();
var mappedData = [];
// Perform some data transformation
$.when.apply($, $.map(data.results, function(value) {
var properties = value.succinctProperties;
//code removed for brevity
return $.when(mapData(properties)).then(function(mappedRow) {
if (mappedRow) {
mappedData.push(mappedRow);
}
});
})).then(function() {
isDataMapped.resolve({
results: mappedData,
numItems: mappedData.length
});
});
return isDataMapped.promise();
}).then(function(data) {                    // ***
debugger;                               // ***
allQueriesMapped.resolve(data);         // ***
});
}));
return allQueriesMapped.promise();
}

它在map内，而它应该在它外面：

function multipleQueries(queriesToExecute, rowData) {
var allQueriesMapped = $.Deferred();
// If a single query has been provided, convert it into an array
if (Array.isArray(queriesToExecute) === false) {
queriesToExecute = [].concat(queriesToExecute);
}
// Create a function for each region to run the query.
$.when.apply($, $.map(queriesToExecute, function(query) {
// Execute the query in the region
return $.when(executeQuery(query.InstanceInfo, query.Query)).then(function(data) {
var isDataMapped = $.Deferred();
var mappedData = [];
// Perform some data transformation
$.when.apply($, $.map(data.results, function(value) {
var properties = value.succinctProperties;
//code removed for brevity
return $.when(mapData(properties)).then(function(mappedRow) {
if (mappedRow) {
mappedData.push(mappedRow);
}
});
})).then(function() {
isDataMapped.resolve({
results: mappedData,
numItems: mappedData.length
});
});
return isDataMapped.promise();
});
})).then(function(data) {
debugger;
allQueriesMapped.resolve(data);
});
return allQueriesMapped.promise();
}

但是里面有很多不必要的$.when和new $.Deferred的使用(见*** 1注释(，你可以更简单地将参数包装在一个数组中(见*** 2注释：

function multipleQueries(queriesToExecute, rowData) {
// If a single query has been provided, convert it into an array
if (Array.isArray(queriesToExecute) === false) {
queriesToExecute = [queriesToExecute]; // *** 2
}
// Create a function for each region to run the query.
return $.when.apply($, $.map(queriesToExecute, function(query) { // *** 1
// Execute the query in the region
return executeQuery(query.InstanceInfo, query.Query).then(function(data) { // *** 1
var mappedData = [];
// Perform some data transformation
return $.when.apply($, $.map(data.results, function(value) {
var properties = value.succinctProperties;
//code removed for brevity
return mapData(properties).then(function(mappedRow) { // *** 1
if (mappedRow) {
mappedData.push(mappedRow);
}
});
})).then(function() {
return {
results: mappedData,
numItems: mappedData.length
};
});
});
}));
}

当你已经有一个承诺时，永远不需要通过new创建一个新的;只需使用then返回的那个。此外，当您已经有了承诺时，就永远不需要使用$.when(thePromise)。

你也可以从早期切换到内置的 promise 语义而不是 jQuery 的Deferred中受益：

function multipleQueries(queriesToExecute, rowData) {
// If a single query has been provided, convert it into an array
if (Array.isArray(queriesToExecute) === false) {
queriesToExecute = [queriesToExecute];
}
// Create a function for each region to run the query.
return Promise.all(queriesToExecute.map(function(query) {
// Execute the query in the region
return executeQuery(query.InstanceInfo, query.Query).then(function(data) {
return Promise.all(data.results.map(function(value) {
var properties = value.succinctProperties;
//code removed for brevity
return mapData(properties);
}).then(function(mappedData) {
mappedData = mappedData.filter(Boolean); // Remove the falsy ones from `mapData`
return {
results: mappedData,
numItems: mappedData.length
};
});
});
}));
}

Promise.all对于处理承诺数组非常有用。但请确保您使用的是最新的jQuery，早期版本的Deferred没有与真正的承诺进行适当的互操作。我不知道(也无法立即找到(何时修复。