Angular 承诺:如果可用,从缓冲区获取数据

Angular promises: get data from buffer if available

在这种情况下,如果数据不在缓冲区中,则要求使用 Http 请求获取数据。如果它在缓冲区中,则在没有 Http 请求的情况下从那里使用它。

我尝试了下面的代码,但没有多大意义;如果数据在缓冲区中,我不知道我是应该 return 从函数什么都不做还是 return 延迟承诺。有什么想法吗?

  var dataBuffer = null;

  var getData = function() {

     var deferred = $q.defer();

     if (dataBuffer != null) {  // this is the part I'm not convinced
         deferred.resolve();
         return;
     }  


     $http.get('/some/url/')
       .success(function(data) { 
               dataBuffer = data;
               deferred.resolve();
       })
       .error(function(data) {
               deferred.reject();
       });

     return deferred.promise;
  };

调用方式如下:

     var promise = getData();
     promise.then (
           function(response) { 
              dataBuffer = .... // dataBuffer contains data
              }
           );

为什么不启用缓存而不是手动处理缓冲区。

   $http.get('/some/url/',{ cache: true})
   .success(function(data) { 
           deferred.resolve(data);
   })
   .error(function(data) {
           deferred.reject();
   });

当您不确定您正在执行的代码是异步的还是非异步的并且它正在使用 $q.when 时,有一种干净简单的方法可以使用 promises 所以代码可以是:

var getData = function() {
    return $q.when(dataBuffer ? dataBuffer: $http.get('/some/url')) 
};

然后在调用 getData 时,您可以使用您发布的相同代码,或者只是简单地使用:

getData()
       .then(function(response){//... 
       })
       .catch(function(err){//..
       });

当心deferred antipattern。你可以非常干净地完成你想做的事情,像这样:

var dataBuffer;
var getData = function() {
    if (dataBuffer) {
        // return a resolved promise for  dataBuffer  if it is already populated
        return $q.when(dataBuffer);
    }  

    $http.get('/some/url/')
    .then(function (data) { 
        dataBuffer = data.data;
        return dataBuffer;
    });
};

getData().then(function (data) { 
    // data contains the data you want
})
.catch(function (error) {
    // error occurred.
});


dataBuffer 不应在 getData 函数之外访问。为了完全清楚这一点,您可以将它们包装在一个 IIFE 中,尽管这是可选的:

var getData = (function () {
    var dataBuffer;
    return function() {
        if (dataBuffer) {
            // return a resolved promise for  dataBuffer  if it is already populated
            return $q.when(dataBuffer);
        }  

        $http.get('/some/url/')
        .then(function (data) { 
            dataBuffer = data.data;
            return dataBuffer;
        });
    };
})();

getData().then(..etc etc etc...);


最后一点,请记住您可以使用 $http 的内置缓存功能,而不必使用自己的缓冲区重新发明轮子:

// much simpler, isn't it?
var getData = function() {
    $http.get('/some/url/', { cache: true })  // enable caching
    .then(function (data) { return data.data });
};

getData().then(...etc etc etc...);