javascript - JavaScript Promise Library在首次调用时使用AJAX请求加载JSON数据，然后在重复调用时从缓存的变量加载

Question

我的JS应用应该做什么的快速描述...

我在项目中使用JavaScript Promise库RSVP.js-https://github.com/tildeio/rsvp.js/。

代码可以执行的一些操作...


在第一个请求上使用AJAX加载4-5个JOSN URL，所有后续请求将改为从缓存的变量提供JSON。
JavaScript Promise（）用于在执行应用程序中的其他代码之前加载所有JSON数据。
全局变量window.jsonCache会在第一次使用AJAX请求将缓存的JSON和Promise（）首次加载到缓存中后，将保存它们。
getJSON（jsonUrl，key）是一个函数，它返回Promise（）并发出AJAX请求或提供缓存的window.jsonCache [key-name-here]数据（如果有）。


目标是使用JavaScript's Promise()并缓存从每个AJAX请求返回的JSON数据，并在对数据的任何重复调用中提供缓存的版本，而不是每次页面上的脚本调用数据时都重复进行AJAX请求。

我已经开始使用我的JavaScript知识来进行演示，而我仍然每天都在学习新的JS。我在PHP中更强大，但在JS中却不断进步。



我需要帮助/帮助的问题

我相信我的工作大部分都能满足我的需求。我的问题出在我的JSFiddle演示http://jsfiddle.net/jasondavis/nzzh1hee/5/上，该示例运行下面说明的所有代码。该演示使用对所有4个JSON URL的AJAX请求加载我的JSON数据。然后，它应缓存结果以供将来调用此数据。相反，下一次我调用/运行代码时，将重复进行AJAX调用。

因此，在某个地方，我的缓存机制似乎无法正常工作，甚至可能出现其他问题。

无论从AJAX请求还是从缓存的变量提供JSON数据，最终结果都应运行我的Promise()代码。

我需要帮助以使这部分工作正常进行。上面的JSFiddle具有此代码的工作演示，您可以查看Dev工具控制台以查看我的调试数据。



更新

SO用户Kevin B确定了我的问题根源是在我的第一个调用有时间缓存值之前调用了对数据的第二个调用，这就是为什么要重复进行AJAX调用！

我可以使用一些帮助来修改此现有代码来解决此问题，如用户Jared Smith所述，如果我可以记住AJAX函数getJSON（jsonUrl，key）会是一个好方法，但我基本上是这样做的所以我可以在这里使用一些帮助！



边注...

JSFiddle演示使用/echo/json/作为所有AJAX请求的端点，该请求在演示中不返回任何数据。因此，我还测试了从AJAX请求本地加载真实JSON数据的过程，只是为了确保这不是问题的根源，并且没有造成任何影响。



此行下的所有代码和文本都只是我的代码的细分，可以更好地解释。上面的文本足以理解问题和目标，并且JSFiddle演示运行以下代码



因此，我将在下面简要尝试分解我的演示代码，以解释其中的一些关键部分...

JSONCache将在成功加载AJAX后保存缓存的JSON数据，以供将来从此缓存中调用JSON数据的调用，而不是发出新的AJAX请求。

// Global variable to hold cached JSON data retrieved from AJAX requests
window.jsonCache = {
  users: '',
  milestones: '',
  tags: '',
  task: ''
};

getJSON（jsonUrl，key）是一个函数，该函数返回Promise（）并发出AJAX请求或提供缓存的数据（如果可用）。 jsonUrl是服务器上JSON数据的URL，密钥是分配的名称，以后将用于访问缓存的数据。



AJAX请求获取JSON数据并填充缓存变量

然后，如果以前未缓存数据，则使用 if(isEmpty(window.jsonCache[key])) { }发出AJAX请求。

AJAX请求将在成功时调用 handler()回调函数，而该函数又会调用 Promise() resolve(this.response) function将JSON数据传递到resolve函数。如果AJAX失败，它将调用 Promise() Reject() function。

在 }else{语句中，它将通过使用其 key值对其进行访问而仅返回数据的缓存版本，并且不会对此数据/ url的特定 key进行重复的AJAX请求。



JSFiddle Demo使用 http://jsfiddle.net/jasondavis/nzzh1hee/5/下面的代码

以下代码中使用的实用程序功能

// RSVP.js Promise Library used from https://github.com/tildeio/rsvp.js/

// utility function to check for empty variables
function isEmpty(str) {
  return (!str || 0 === str.length  ||  str === '');
}

// Global variable to hold cached JSON data retrieved from AJAX requests
window.jsonCache = {
  users: '',
  milestones: '',
  tags: '',
  task: ''
};

PROMISE（）函数可对JSON数据进行AJAX请求

// AJAX function to load JSON data using Promise()
var getJSON = function(url, key) {
  var promise = new RSVP.Promise(function(resolve, reject){

      // If cached data is not set then make AJAX requiest to get it
      if(isEmpty(window.jsonCache[key])) {

        var client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();

        console.log('---- "client" XMLHttpRequest/AJAX  variable ======= ',client);     

        ////////////// temp test
        //      jsonCache[key] = ' AJAX Response';   
        ////////////// end temp test    

        function handler() {
          if (this.readyState === this.DONE) {
            // On AJAX success, resolve() our Promise() and set result to cached variable 
            // to avoid duplicate AJAX requests for this jsonCache[key] Data where "key"
            // is used to assign to each AJAX endpoint URL/request of JSON data... 
            // (milestones, tasks, users, etc...)
            if (this.status === 200) {
                window.jsonCache[key] = this.response;
                window.jsonCache[key] = key+' AJAX Response';

                console.log('---- window.jsonCache['+key+'] ====== ',window.jsonCache[key]);

                // Resolve() the Promise() on AJAX success
                resolve(this.response);

            // On AJAX failure, reject() our Promise()
            }else{
                reject(this);
            }
          }
        };

      // If JSON data for this key is already cached, then return the cached version 
      // instead of making a new AJAX request!
      }else{
        console.log('---- window.jsonCache['+key+'] ====== ',window.jsonCache[key]);

        // Return cached version of JSON data as a Promise() and pass into the 
        // Resolve() function
        window.jsonCache[key] = key+' CACHED Response';
        resolve(window.jsonCache[key]);
      }

  });

  return promise;
};

使用上述代码示例使用演示

首次调用/加载JSON数据，该数据通过AJAX请求加载并将结果缓存到变量中。

// EXAMPLE USAGE DEMO
// usage loading multiple AJAX calls using Promises
// Each of these 4 JSON URLs below will be loaded using Promise() and AJAX requests on 
// first call to them.  2nd call to them should instead serve a cached version stored in 
// a global variable window.jsonCache.KEYNAME-HERE
var promises = {
    users: getJSON('/echo/json/', 'users'),
    milestones: getJSON('/echo/json/', 'milestones'),
    tags: getJSON('/echo/json/', 'tags'),
    task: getJSON('/echo/json/', 'task')
};     

// Load the AJAX JSON function above for each Promise()
// Handles success, finally() for every load, and error for when error occurs
RSVP.hash(promises).then(function(results) {
    console.log(results);
    console.log(results.users); // print the users JSON results
}).finally(function(){
    console.log('finally() function ran on success and failure.... It is always ran!');
}).catch(function(reason){
    console.log('[ERROR] REASON:',reason.statusText); //if any of the promises fails.
});

第二次调用以加载JSON数据，该数据应从缓存的变量加载，但仍从新的AJAX请求加载

/////////////////////////////////////////////////////////////////////////////////////////////////
//
//
//   Below is another call to load the same 4 JSON data to test and see if it is 
//   served from a cached variable instead of making a duplicate 2nd AJAX request for each item.
//
//
////////////////////////////////////////////////////////////////////////////////////////////////


// EXAMPLE USAGE DEMO
// usage loading multiple AJAX calls using Promises
// Each of these 4 JSON URLs below will be loaded using Promise() and AJAX requests on 
// first call to them.  2nd call to them should instead serve a cached version stored in 
// a global variable window.jsonCache.KEYNAME-HERE
var promises = {
    users: getJSON('/echo/json/', 'users'),
    milestones: getJSON('/echo/json/', 'milestones'),
    tags: getJSON('/echo/json/', 'tags'),
    task: getJSON('/echo/json/', 'task')
};     

// Load the AJAX JSON function above for each Promise()
// Handles success, finally() for every load, and error for when error occurs
RSVP.hash(promises).then(function(results) {
    console.log(results);
    console.log(results.users); // print the users JSON results
}).finally(function(){
    console.log('finally() function ran on success and failure.... It is always ran!');
}).catch(function(reason){
    console.log('[ERROR] REASON:',reason.statusText); //if any of the promises fails.
});

Answer 1

第二组请求在第一组请求完成之前发送，因此在缓存具有值之前，它们也将发送请求。您应将诺言存储在缓存中，并始终返回诺言。

这是一个简化的示例，该示例使用组合的sendRequest方法返回诺言。

var cache = {};

function getData (url, key) {
  if (!cache[key]) { 
    cache[key] = sendRequest(url);
  }
  return cache[key];
}

var promisesOne = {
    users: getData('/echo/json/', 'users'),
    milestones: getData('/echo/json/', 'milestones'),
    tags: getData('/echo/json/', 'tags'),
    task: getData('/echo/json/', 'task')
};

var promisesTwo = {
    users: getData('/echo/json/', 'users'),
    milestones: getData('/echo/json/', 'milestones'),
    tags: getData('/echo/json/', 'tags'),
    task: getData('/echo/json/', 'task')
};

http://jsfiddle.net/jv8kzdy9/

我的示例与您的代码之间的关键区别在于，我的任何一个键始终返回相同的promise，这意味着上面的promiseOne和promiseTwo具有相同的promise集。每次调用getJSON时，您的返回一个新的Promise。这种区别很重要，因为没有它，第二个调用将无法知道第一个调用何时完成，只能处理当前缓存对象中的内容。