Consultas jQuery Ajax em cache de página

Temos vários editores Wysiwyg na página, todos obtendo uma lista JSON de imagens do servidor que é usado para preencher uma função de seleção / inserção de imagem.

Embora cada elemento da página seja independente, não queremos realmente buscar a imagem json individualmente. Seria muito melhor se pudéssemos armazená-lo em cache na página.

Eu construí este pequeno wrapper jQuery ajax que armazena em cache os dados na página para que a primeira chamada faça a solicitação e salve a promessa. As chamadas subsequentes apenas obtêm a promessa de volta (de $.ajax), permitindo que vários selecionadores de imagem obtenham seus dados com apenas 1 chamada ajax.

Basicamente, em vez de armazenar os dados em cache, armazenamos a promessa em cache.

window.CachedDataService = {

  inProgress: {
  },
  ajax: function(ajaxOptions) {
    var key = ajaxOptions.url + (JSON.stringify(ajaxOptions.data || ''))
    if (this.inProgress[key]) {
      return this.inProgress[key];
    }
    else {
      this.inProgress[key] = $.ajax(ajaxOptions);
      return this.inProgress[key];
    }
  }
}


/** sample call */

var ajaxOpts = {
  url: '/big_data_fetch'
}
var success = function(data) { 
  // do something with the data
}
var complete = function() {
  // do something after the fetch is finished
}

/* 
Try the following and watch your browser network tab. 
You should only see 1 XHR call.
*/

CachedDataService.ajax(ajaxOpts).done(success).always(complete)
CachedDataService.ajax(ajaxOpts).done(success).always(complete)

https://gist.github.com/bunnymatic/4cb28555860355660150