将来自RSVP.js的承诺数组与jQuery的$.ajax集成
将来自RSVP.js的承诺数组与jQuery的$.ajax集成
提问于 2014-02-06 00:51:49
Re：https://github.com/tildeio/rsvp.js
将RSVP.js与jQuery的$.ajax集成的最佳方法是什么？经过阅读和研究，我发现在Ember中，围绕着它的包装器正在积极地发展。https://github.com/emberjs/ember.js/pull/4148
有过这种承诺用例的人吗？
我使用RSVP.js是因为我通过.all()方法处理一个动态的许诺数组。
数组中的每一个承诺都有自己的承诺，一旦递归地完成了对函数的数据轮询，就会实现这些承诺。我在考虑如何构造代码时遇到了问题。
如果您感兴趣的话，用例是我将一个AJAX请求发送给我的API，以获得一个与特定资源相关的报表，该报表返回URL端点列表，以便获得更多关于其子资源的报表数据。然后，这些资源中的每一个都返回一个JSON对象，其中包含某一天的报表数据，第二天(或一组天)返回另一个具有params的URL。然后，它会从同一个端点继续轮询带有"next“的数据，直到没有剩余的数据为止。
提前感谢任何能帮忙的人！
此外，如果您对如何格式化这段代码有任何指导，以便它更易读和更易于维护，我很想听听。
代码：
url = "http://localhost:3000/api/foo_resources/1/reports/bar"
var headers = {
"Accept": 'application/vnd.xps+json; version=1', // Headers for API access
"X-User-Email": 'example@company.com',
"X-User-Token": '1234abcd',
}
$.ajax({
type: 'GET',
url: url,
headers: headers,
dataType: 'json',
xhrFields: {
withCredentials: true
}
}).then(function(response) {
// the ajax request would return a long list of bucket like this with endpoints to hit {
// {
// "buckets": [
// "http://localhost:3000/api/foos_nested_resources/1/reports/bar"
// "http://localhost:3000/api/foos_nested_resources/2/reports/bar"
// "http://localhost:3000/api/foos_nested_resources/3/reports/bar"
// ]
// }
var promises = response.buckets.map(function getReportData(bucket) {
return new RSVP.Promise(function(resolve, reject) {
var recursiveRequest = function(bucket) {
$.ajax({
type: 'GET',
url: bucket,
headers: headers,
dataType: 'json',
xhrFields: {
withCredentials: true
}
// This is the report that comes back, obviously truncated significantly for this example
// {
// reports: [
// { id: 1, datapoint_a: 5438, datapoint_b: 1389 },
// { id: 2, datapoint_a: 4336, datapoint_b: 2236 }
// ],
// next: "http://localhost:3003/api/nexted_foo_resources/1/reports/bar?ends=2014-02-06&starts=2014-01-24"
// }
}).done(function(response) {
$.merge(reports, response.reports); // I could use concat here but I prefer readability
if (response.next) {
recursiveRequest(response.next);
} else {
resolve(reports);
}
}).error(function(error) {
reject(error);
});
};
recursiveRequest(bucket);
});
});
RSVP.all(promises).then(function(data) {
console.dir(data);
}).catch(function(error) {
console.dir(error);
})
})回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-06 03:38:10
请注意，我还没有测试这段代码(因为我手头没有您的API )，我认为以下内容更接近于RSVP的惯用用法：
var initialUrl = "http://localhost:3000/api/foo_resources/1/reports/bar";
var headers = {
"Accept": 'application/vnd.xps+json; version=1', // Headers for API access
"X-User-Email": 'example@company.com',
"X-User-Token": '1234abcd',
};
function rsvpAjax(opts){
return new RSVP.promise(function(resolve, reject){
var defaultOpts = {
type: 'GET',
headers: headers,
dataType: 'json',
xhrFields: {
withCredentials: true
}
};
$.ajax($.extend({}, defaultOpts, opts, {
success: function(json) {
resolve(json);
},
error: function(jqXhr, textStatus, errorThrown){
reject({ jqXhr: jqXhr, textStatus: textStatus, errorThrown: errorThrown});
}
}));
});
}
function requestBucket(bucket){
return rsvpAjax({ url: bucketUrl }).then(bucketResponseProcessor(bucket));
}
function bucketResponseProcessor(bucket){
return function(response){
$.merge(bucket.reports, response.reports);
if (response.next) {
bucket.url = response.next;
return requestBucket(bucket);
} else {
return bucket.reports;
}
};
}
rsvpAjax({ url: initialUrl }).then(function(response) {
return RSVP.all(response.buckets.map(function(bucketUrl){
var bucket = { url: bucketUrl, reports: [] };
return requestBucket(bucket).then(processBucketResponse);
}));
}).then(function(reports) {
console.dir(data);
}).catch(function(error) {
console.dir(error);
});Stack Overflow用户
发布于 2014-05-03 21:34:32
我想你要找的是Ember.RSVP.Promise.cast()
示例显示了$.getJSON()，但是它应该可以使用任何jQuery Ajax方法，因为它们都返回延迟对象。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21591865
复制相关文章
相似问题
腾讯云开发者
