AngularJS多次处理调用承诺

AngularJS handle calling promise multiple times

本文关键字：调用 承诺 处理 AngularJS      更新时间：2023-09-26

我有一个服务，必须返回给我的国家/地区列表。但是我想将国家/地区值缓存到变量中以防止多个 ajax 调用。我创建了一个承诺对象，但我的 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;
        }
}

在所有情况下返回 q.promise

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")
                }
            });
        } else {
            console.log("cache")
            q.resolve(vm.countries)
        }
         return q.promise;
}

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

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;
}

如果您使用它来将值绑定到模板。我认为，也可以使用$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/$resource

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

相关文章：