我需要使用带有AJAX请求的JavaScript和/或jQuery从服务器加载JSON数据。
我在同一页面加载上有几个其他脚本,在加载后需要访问这个JSON数据,所以在我的其他代码运行之前加载它是很重要的。
我想利用并使用较新的 Promises和Deferred Objects
此问题和示例代码显示了从我的应用程序加载JSON数据的1次,但在最终结果中,我将复制它以从3-4个AJAX请求加载3-4组不同的JSON数据。所以重要的是要做到这一点,以便我的所有请求都可以使用相同的代码。
关于数据及其使用的一些背景可能有助于更好地理解我的目标......
我正在构建一个具有主要核心JavaScript对象/文件的Project Management应用程序。然后我有子模块JavaScript对象/文件与核心文件一起工作。
其中一些包括:
现在在我的核心PM JavaScript文件中,我需要访问用户列表JSON对象。应该在页面加载时加载用户列表,其中包含来自ProjectManagement.User.module.js
对象/文件的1个AJAX请求,然后将JSON结果缓存到ProjectManagement.js
对象/文件中的变量。
下次没有任何子模块JavaScript代码需要访问用户列表JSON时,它只会从缓存变量中获取数据,而不是发出额外的AJAX请求来为每个子模块反复获取数据模块。
同样的情况也适用于所有相关数据,例如里程碑,标签,ACL权限等。
由于这个原因,我觉得JavaScript Promises和Deferred对象是一个很好的路径而不是回调函数。我需要从多个AJAX请求加载所有这些JSON对象,并在我的所有子模块JS代码开始调用它们并导致问题之前将它们全部加载。
在我尝试使用Promises和Deferred对象时,这就是我从下面的代码中得到的......
var deferredLoadTaskObject = $.Deferred();
resolve()
函数
deferredLoadTaskObject.resolve();
reject()
函数 deferredLoadTaskObject.reject();
说实话,我不确定我是否需要进行上述调用。我知道所有的jQuery AJAX请求本身都是Promise
所以上面这段代码可能只是做了两次相同的事情了吗?
我更喜欢上面代码所显示的显式调用,因为它看起来更加剪切和干燥以显示它正在做什么。但是如上所述,我不确定是否需要它?
我做错了吗?
下面的代码显示了我的AJAX请求的简化/清理版本,它使用了上面的承诺/延迟代码。
我有一个特定的函数,它有1个单独的作业,用于发出AJAX请求并返回结果。我想继续这种方法,因为它很干净,易于理解和遵循。
我可以为我需要的每个数据集(里程碑,用户,标签等)设置类似ajaxLoadTaskData(task_id)
的函数。
然后我var taskDataAjax = ajaxLoadTaskData(task_id);
将AJAX请求分配给var taskDataAjax
,然后我可以在其上调用taskDataAjax.done()
,taskDataAjax.fail()
和taskDataAjax.always()
在其中每个内部我都可以调用deferredLoadTaskObject.resolve()
和deferredLoadTaskObject.reject()
来满足承诺/延迟对象
简短摘要版本
如果你不能完全阅读以上内容......
我只需要帮助确保我正在使用 Promise / Deferred Objects 正确地生成我的AJAX请求,这些请求最终会产生几个不同的AJAX请求,并且在那里完成将数据分配给变量在我的大型JS应用程序中的几个JavaScript子模块/对象/文件中使用。
如果我做错了,请提供一些帮助以使其正确
我关注的一个方面是调用var deferredLoadTaskObject = $.Deferred();
然后在AJAX响应回调中调用deferredLoadTaskObject.resolve()
和deferredLoadTaskObject.reject()
。
我不确定这是否正确使用,或者我不应该调用它们,因为jQuery AJAX请求默认已经是某种 Promise 。
使AJAX请求加载JSON数据并将其返回的JavaScript函数
ajaxLoadTaskData: function(task_id) {
return $.ajax({
type: 'POST',
async: true,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: getTaskRecordUrl,
data: {
action: 'load-task-record',
task_id: task_id
},
});
},
测试Promise和Deferred Objects的使用
var deferredLoadTaskObject = $.Deferred();
为AJAX请求调用上述函数的JavaScript ...
// Get Task Data from AJAX Request
var taskDataAjax = ajaxLoadTaskData(task_id);
taskDataAjax.done(function(response) {
// JSON response from AJAX request
var taskRecordJson = response;
deferredLoadTaskObject.resolve();
});
taskDataAjax.fail(function(response) {
// AJAX request failed
console.log('response', 'response');
deferredLoadTaskObject.reject();
});
taskDataAjax.always(function(response) {
});