Question

我已经构建了一个通过$ http。

返回资源的复杂方法

该方法返回一个promise，然后检查我的本地缓存是否存在资源。如果是，它将返回缓存的资源，如果不是，它将发出$ http请求。在缓存资源之后这很好用，但是我在加载时触及此方法的应用程序中有多个函数，并且每个函数都会发出http请求，因为资源尚未返回并缓存。 / p>

我想出了一个简单的检查来解决这个问题，但我觉得应该有一个更好的方法。我添加了一个布尔值，如果方法正在获取资源，则设置为true，如果是，我使用半秒超时解析方法，以给予请求时间解决。代码如下。

那么，有更好的方法吗？

   var schools = [];
   var loadingSchools = false;

   function getAllSchools(forceUpdate) {
        return $q(function (resolve, reject) {
            if(loadingSchools) resolve($timeout(getAllSchools, 500));

            else{

                loadingSchools = true;

                if (schools.length && !forceUpdate) {
                    loadingSchools = false;
                    resolve(schools);
                    return;
                }

                console.log('$http: Getting All Schools - schoolService.js');

                $http.get(API_PATH + 'schools_GetAll', {cache:true})
                .success(function(result) {
                    schools = result;
                    loadingSchools = false;
                    resolve(schools);
                })
                .error(function(error) {
                    schools = [];
                    loadingSchools = false;
                    reject(error);
                });
            }
        });
    }

Answer 1

首先，我认为有必要将HttpPromise包装到另一个承诺中。使用success/error方法deprecated，您应该完全依赖then()方法，并将HttpPromise视为常规承诺。

为了确保请求只发送一次，您实际上可以跟踪您创建的第一个HttpPromise，并在随后的函数调用中返回相同的承诺。

这是一个接受API端点作为参数的服务，并确保只向该API发送一个请求。

app.factory('$httpOnce', [ '$http', '$cacheFactory',
  function ($http, $cacheFactory) {
    var cache = $cacheFactory('$httpOnce');

    return function $httpOnce(url, options) {
      return cache.get(url) || cache.put(url, $http.get(url, options)
        .then(function (response) {
          return response.data;
        }));
    };
  }
]);

<强>用法

function log(data) {
  console.log(data);
}

// issues an HTTP request
$httpOnce('https://api.github.com/').then(log);
// does not issue an HTTP request, returns the same promise as above
$httpOnce('https://api.github.com/').then(log);

// ...
// HTTP request completes somewhere, both promises above are resolved
// ...

setTimeout(function () {
  // immediately resolved
  $httpOnce('https://api.github.com/').then(log);
}, 5000);

这是demo。您可以在开发工具中看到只发出一个请求。

Answer 2

我只是完全相同的问题，这是我的服务

app = angular.module('MM_Graph')

class Team_Data
  constructor: ($routeParams,$rootScope, $cacheFactory, $q, API)->
    @.$routeParams  = $routeParams
    @.$rootScope    = $rootScope
    @.$cacheFactory = $cacheFactory
    @.cache         = $cacheFactory('team_Data')
    @.$q            = $q
    @.deferred      = null
    @.API           = API
    @.project       = null
    @.data          = null
    @.team          = null
    @.schema        = null


  call_With_Cache: (method, params, callback)=>                                 # method that uses promises to prevent multiple parallel calls

    cache_Key = "#{method}_#{JSON.stringify(params)}"                           # create cache key using method and params

    if not @.cache.get cache_Key                                                # if this is the first require for this type of data (method_project_team)
      deferred = @.$q.defer()                                                   # create a new instance of deferred
      @.cache.put cache_Key, deferred.promise                                   # put its promise in the cache

      on_Data_Received = (data)->                                               # simple callback method to resolve the promise
        deferred.resolve(data)                                                  # resolve promise (this is the data that will show as the 1st param in 'then')

      method_Params = params.concat(on_Data_Received)                           # append on_Data_Received callback method to the current 'method' params list

      @.API[method].apply(null, method_Params)                                  # invoke 'method' in @.API

    @.cache.get(cache_Key).then (data)->                                        # invoke the 'then' from the promise (will happen async until data is recevied)
      callback (data)                                                           # finally call the original callback with the data received from 'method'

  clear_Data: ()=>
    @.cache.removeAll()
    @.scores   = null
    @.schema   = null
    @.data     = null
    @.deferred = null

  load_Data: (callback)=>
    if not (@.$routeParams.project and @.$routeParams.team)                     # check that project and team are set
      return callback()

    if (@.$routeParams.project is @.project and @.$routeParams.team is @.team)  # check if either the project or team have changed
      # do nothing here since project or team have not changed
    else
      @.clear_Data()                                                            # when project changes remove all cache entries
      @.project = @.$routeParams.project
      @.team    = @.$routeParams.team
      @.project_Schema (schema)=>                                               # get projecg schema
        @.data_Score (scores)=>                                                 # get current team scores
          @.team_Get (data)=>                                                   # get team data
            @.scores = scores
            @.schema = schema
            @.data   = data

            @.deferred.resolve()                                                # trigger promise resolve

    @.deferred ?= @.$q.defer()                                                  # ensure @.deferred object exits
    @.deferred.promise.then ->                                                  # schedule execution
      callback()                                                                # invoke original caller callback

  data_Score    : (             callback) => @.call_With_Cache 'data_Score'       , [@.project, @.team      ], callback
  project_Schema: (             callback) => @.call_With_Cache 'project_Schema'   , [@.project              ], callback
  radar_Fields  : (             callback) => @.call_With_Cache 'data_Radar_Fields', [@.project              ], callback
  radar_Team    : (target_Team, callback) => @.call_With_Cache 'data_Radar_Team'  , [@.project, target_Team ], callback
  team_Get      : (             callback) => @.call_With_Cache 'team_Get'         , [@.project, @.team      ], callback

  save: (callback)=>
    @.API.file_Save @.project, @.team , @.data, callback

app.service 'team_Data', ($routeParams, $rootScope, $cacheFactory, $q, API)=>
  return new Team_Data $routeParams, $rootScope, $cacheFactory, $q, API

在Angular中防止多个$ http请求。有没有更好的办法？

2 个答案: