Question

我有一项服务必须返回我国家列表。但我想将国家/地区值缓存到变量以防止多个ajax调用。我创建了一个promise对象，但我的html必须多次调用此服务。当我调用该服务时，有时它会在从缓存返回之后第一次从ajax返回，有时它会在缓存之后从ajax重新执行3次。我怎么处理这个？

这是我的服务：

var vm = this;
vm.countries;

 vm.getCountries = function () {
    var q = $q.defer();
        if (vm.countries === undefined) {
            return $http({
                method: 'POST',
                cache: true,
                url: API + '/api/Global/Countries',
            }).then(function successCallback(response) {
                if (errorHandler(response.data)) {
                    vm.countries = response.data;
                    q.resolve(response.data)
                    console.log("ajax")
                    return q.promise;
                }
            });
        } else {
            console.log("cache")
            q.resolve(vm.countries)
            return q.promise;
        }
}

Answer 1

在所有情况下返回q.promise

var Component = function () {
    var _componentName;
    var _test = 'ts';
    return {
        getName: function(){
            console.log('getName() is called');
            console.log(this._componentName);
            console.log(_test);
            return _componentName;
        }
    };
};

var Skip_button = function () {
    var skipBtn = Component();
    skipBtn._componentName = 'Skip_Btn';
    return skipBtn ;
};

var skipBtn = Skip_button();
skipBtn.getName();

Answer 2

您可以缓存承诺而不是数据。您可能还想考虑这里的错误情况会发生什么。需要清除缓存的承诺。

var vm = this;

function getCountries () {
    if (!vm.countryPromise) {
        vm.countryPromise = $http({
            method: 'POST',
            cache: true,
            url: API + '/api/Global/Countries',
        }).then(function successCallback(response) {
            if (errorHandler(response.data)) {
                console.log("ajax")
                return response.data;
            }
        });
    } else {
        console.log("cache")
    }
    return vm.countryPromise;
}

Answer 3

如果您使用它将值绑定到模板。我认为，也可以使用$resource来实现。

angular.module('myApp').factory('Country', function($resource) {
  return $resource(API + '/api/Global/Countries'); 
});

//in controller
var countries= Country.query(function() {
  console.log(countries);
});

引用资源文档

重要的是要意识到调用$ resource对象方法会立即返回一个空引用（对象或数组，具体取决于isArray）。从服务器返回数据后，将使用实际数据填充现有引用。这是一个有用的技巧，因为通常将资源分配给模型，然后由视图呈现。具有空对象导致无渲染，一旦数据从服务器到达，则对象用数据填充，并且视图自动重新呈现其自身显示新数据。这意味着在大多数情况下，永远不必为动作方法编写回调函数。

https://docs.angularjs.org/api/ngResource/service/ $资源

https://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/

AngularJS多次处理调用promise

3 个答案: