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

时间:2015-10-17 02:31:22

标签: javascript jquery ajax promise jquery-deferred

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

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

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

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

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

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

其中一些包括:

  1. Core ProjectManagement.js
  2. ProjectManagement.User.module.js
  3. ProjectManagement.Milestones.module.js
  4. ProjectManagement.Tags.module.js
  5. ProjectManagement.Tasks.module.js
  6. ProjectManagement.Files.module.js
  7. ProjectManagement.Activity.module.js
  8. 现在在我的核心PM JavaScript文件中,我需要访问用户列表JSON对象。应该在页面加载时加载用户列表,其中包含来自ProjectManagement.User.module.js对象/文件的1个AJAX请求,然后将JSON结果缓存到ProjectManagement.js对象/文件中的变量。

    下次没有任何子模块JavaScript代码需要访问用户列表JSON时,它只会从缓存变量中获取数据,而不是发出额外的AJAX请求来为每个子模块反复获取数据模块。

    同样的情况也适用于所有相关数据,例如里程碑,标签,ACL权限等。

    由于这个原因,我觉得JavaScript Promises和Deferred对象是一个很好的路径而不是回调函数。我需要从多个AJAX请求加载所有这些JSON对象,并在我的所有子模块JS代码开始调用它们并导致问题之前将它们全部加载。

    在我尝试使用Promises和Deferred对象时,这就是我从下面的代码中得到的......

    1. var deferredLoadTaskObject = $.Deferred();
    2. 在AJAX成功时,我调用了延迟对象的resolve()函数 deferredLoadTaskObject.resolve();
    3. 在AJAX失败时,我调用延迟对象的reject()函数 deferredLoadTaskObject.reject();
    4. 说实话,我不确定我是否需要进行上述调用。我知道所有的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) {
      
      });
      

0 个答案:

没有答案