以$资源缓存数据的承诺格局缓存、格局、数据、资源

2023-09-13 02:36:52 作者:谎言丶縂是那么的动听ゝ

假设我的服务是从$资源返回一个承诺搞定了,我想知道这是否是缓存数据的正确方法。在这个例子中,击中背部箭头,返回的搜索结果后,我不想再次查询Web服务器,因为我已经有他们。这是处理这种情况的正确模式?下面的例子查询Flixter(烂番茄)API。

Assuming my service is returning a promise from a $resource get, I'm wondering if this is the proper way to cache data. In this example, after hitting the back arrow and returning to the search results, I don't want to query the webserver again since I already have them. Is this the proper pattern to handle this situation? The example below is querying the Flixter (Rotten Tomatoes) Api.

Boilded下跌code:

Boilded down code:

控制器:

function SearchCtrl($scope, $route, $routeParams, $location, DataService) {
    DataService.search($routeParams.q).then(function(data){
       $scope.movies = data.movies;
    });
}

服务:

angular.module('myApp.services', []).
 factory('DataService', ['$q', '$rootScope', 'JsonService', function ($q, $rootScope, JsonService) {

  var movie = {};
  var searchResults = {};
  var searchq = '';
  var service = {

    search: function(q) {

        var d = $q.defer();
        // checking search query, if is the same as the last one, 
        //resolve the results since we already have them and don't call service
        // IS THIS THE CORRECT PATTERN
        if (q==searchq) {
           d.resolve(searchResults);              
        } else {
          // returns a $resource with defined getdata
          JsonService.search.movieSearch(q, 20, 1).getdata(function(data){
            searchResults = data;
            searchq = q;
            d.resolve(searchResults);
          });
        }
       return d.promise;

    },
      getSearchResults: function() {
        return searchResults;
      }
 };

 return service;
 }]);

我不能提供一个工作的例子,因为它会暴露我的API密钥。

I can't provide a working example as it would expose my API key.

推荐答案

我伪造了实际的Ajax请求,但我认为总体思路应该适用,你可以看到的全演示这里

I've faked out the actual ajax request but I think the general idea should apply, you can see the full demo here

下面是控制器,它只是执行搜索,然后设置的结果:

Here is the controller, it just executes the search and then sets the results:

myApp.controller('MyCtrl', function($scope, DataService) {
     $scope.search = function(){
          DataService
              .search($scope.q)
              .then(function(response){
                  $scope.fromCache = response.fromCache;
                  $scope.results = response.results;
              });
      };
});

在DataService的,我只是将结果保存到关闭键入查询的对象。这是简单的,但希望将让你开始。如果你想这样的事情,你可以将其保存在存储HTML5或东西。

In the DataService I am just saving results into an object keyed off the query. It is simplistic but hopefully will get you started. You could save it in html5 storage or something if you want something like that.

您需要把你的实际Ajax调用在这里,但原理。

You will need to put in your actual ajax call here, but the principle remains.

myApp.factory('DataService', function($q){
      var resultsCache = {};
      return {
          search: function(query){
              var deferred = $q.defer();
              if (resultsCache[query]) {
                  resultsCache[query].fromCache = true;
              }
              else {
                  resultsCache[query] = {results: [{name: 'result one'}, {name: 'result two'}]};
              }
              deferred.resolve(resultsCache[query]);
              return deferred.promise;
          }
      };
});

希望帮助