Question

我需要使用带有AJAX请求的JavaScript和/或jQuery从服务器加载JSON数据。

我在同一页面加载上有几个其他脚本，在加载后需要访问这个JSON数据，所以在我的其他代码运行之前加载它是很重要的。

我想利用并使用较新的 Promises和Deferred Objects

此问题和示例代码显示了从我的应用程序加载JSON数据的1次，但在最终结果中，我将复制它以从3-4个AJAX请求加载3-4组不同的JSON数据。所以重要的是要做到这一点，以便我的所有请求都可以使用相同的代码。

关于数据及其使用的一些背景可能有助于更好地理解我的目标......

我正在构建一个具有主要核心JavaScript对象/文件的Project Management应用程序。然后我有子模块JavaScript对象/文件与核心文件一起工作。

其中一些包括：

Core ProjectManagement.js
ProjectManagement.User.module.js
ProjectManagement.Milestones.module.js
ProjectManagement.Tags.module.js
ProjectManagement.Tasks.module.js
ProjectManagement.Files.module.js
ProjectManagement.Activity.module.js

现在在我的核心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();
在AJAX成功时，我调用了延迟对象的resolve()函数 deferredLoadTaskObject.resolve();
在AJAX失败时，我调用延迟对象的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) {

});

在我的jQuery AJAX请求中正确使用Deferred对象和Promise

0 个答案: