javascript - 使用 JavaScript 中的 Memoization 和 Promises+Deferrends 将从 AJAX 加载的 JSON 数据缓存到本地变量

Question

在底部的演示 JavaScript 应用程序 ProjectManagementTaskModal.init() 中运行它检查一些标志变量以查看一些 JSON 数据之前是否已经使用 AJAX 请求加载并在本地缓存到变量。

如果尚未加载和缓存 AJAX JSON 数据，则会发出 AJAX 请求以获取数据并缓存它，然后再将其返回给调用它的代码。典型的内存。

我的目标是将 JavaScript Promises + Deferrends 与 jQuery 结合使用，以确保为应用程序加载我的所有 JSON 数据并缓存到本地变量。

我需要帮助才能在我的应用中使用 Promises 以确保在执行其他操作之前加载所有 JSON 数据。

该演示有 2 个 AJAX JSON 调用，但在实时应用程序中，这可能多达 8 个，都需要从缓存的 var 加载或发出 AJAX 请求来加载，并且在所有情况下确保在触发代码之前加载所有完成。

而不是典型的例子...

$.when(
  ProjectManagementTaskModal.ajaxLoadJson.loadUserData(user_id),
  ProjectManagementTaskModal.ajaxLoadJson.loadTaskData(task_id)
).then(
  function(){
    // Both URLs have been fetched completed.
  }
);

上面调用的 AJAX 函数看起来像这样......

     // load Task data JSON with AJAX request
      loadTaskData: 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
            },
          });
      },

我想将每个 JSON AJAX 请求的结果缓存到一个应用程序变量中，在上面的 Promise 代码中，它应该在以后的调用中从缓存的变量中返回数据，并且只在数据尚未缓存时才进行 AJAX 调用.

我需要确保在任何 JSON AJAX 调用中返回缓存版本(如果之前已经加载过的话)。

有什么帮助吗？

---

/**
 * ProjectManagementTaskModal handles all the Task Modal functionality
 * @param  {[type]} window    [description]
 * @param  {[type]} document  [description]
 * @param  {[type]} $         [description]
 * @param  {[type]} undefined [description]
 * @return {[type]}           [description]
 */
(function (window, document, $, undefined) {
    "use strict";

    //we cache a few useful values, like jQuery wrapped window and document
    var $window = $(window),
      $document = $(document),

    ProjectManagementTaskModal = {

      cache: function() {

        isUserJsonLoaded: false,
        userJsonData: '',
        isTaskJsonLoaded: false,
        taskJsonData: '',

      },


      init: function() {

        // load user JSON data if not loaded already
        if(typeof ProjectManagementTaskModal.cache.isUserJsonLoaded != 'undefined' && ProjectManagementTaskModal.cache.isUserJsonLoaded .length != 0)
        {
          // user JSON data is already loaded and cached to local var
          alert('user json data loaded');
        }else{
           // user JSON data is NOT already loaded so we need to make AJAX call to get it and cache it to local var 
          alert('user json data NOT loaded');

          // Make AJAX request to load User JSON data and cache for next load
          ProjectManagementTaskModal.cache.userJsonData = ProjectManagementTaskModal.ajaxLoadJson.loadUserData(user_id);          

          ProjectManagementTaskModal.cache.isUserJsonLoaded = true;
        }

        // load Task JSON data if not loaded already
        if(typeof ProjectManagementTaskModal.cache.isTaskJsonLoaded != 'undefined' && ProjectManagementTaskModal.cache.isTaskJsonLoaded .length != 0)
        {
          // Task JSON data is already loaded and cached to local var
          alert('Task json data loaded');
        }else{
           // Task JSON data is NOT already loaded so we need to make AJAX call to get it and cache it to local var 
          alert('Task json data NOT loaded');


          // Make AJAX request to load Task JSON data and cache for next load
          ProjectManagementTaskModal.cache.taskJsonData = ProjectManagementTaskModal.ajaxLoadJson.loadTaskData(task_id);

          ProjectManagementTaskModal.cache.isTaskJsonLoaded = true;

        }

      },


      ajaxLoadJson: function() {

          // load User data JSON with AJAX request
          loadUserData: function(user_id) {
              return $.ajax({
                type: 'POST',
                async: true,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                url: getTaskRecordUrl,
                data: {
                  action: 'load-task-user-record',
                  task_id: task_id
                },
              });
          },

          // load Task data JSON with AJAX request
          loadTaskData: 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
                },
              });
          },

      },



    };



    // Run Init on DOM Ready
    $(function() {
        ProjectManagementTaskModal.init();
    });

}(this, document, jQuery));

---

Answer 1

在lodash中，有一个_.memoize功能，非常适合您的用例。

_.memoize(func, [resolver])

Creates a function that memoizes the result of func. If resolver is provided it determines the cache key for storing the result based on the arguments provided to the memoized function. By default, the first argument provided to the memoized function is coerced to a string and used as the cache key. The func is invoked with the this binding of the memoized function.

如果你想建立你自己的 memoize，你可以使用很多技术，我最喜欢的是使用闭包来隐藏缓存数据。它可用于缓存一个请求，但可以轻松修改。

var getJsonData = (function() {
    var cachedData;
    return function() {
        if (cachedData) {
            return $.when(cachedData);
        } else {
            return $.post({...}).then(function(response) {
                cachedData = response;
                return response;
            });
        }
    };
})();