angular 服务中的数据对象变量通过 ajax 调用更新

Question

用例：

我想在 angular 中创建一个服务，它将 return 我一个数据对象，它是服务内部的一个变量，通过 ajax 调用更新一次。

第一次未通过 ajax 接收到数据之前，它将 return {}。收到数据后，它将始终 return 该数据。

问题：

数据已在 ajax 中正确接收。接收到的数据结构是一个对象。我已经通过登录控制台进行了检查。但是下次调用此服务时，它会再次调用 ajax，因为服务中的变量没有得到更新。

任何人都可以建议为什么会发生这种情况以及实现上述目标的空闲方式是什么？

代码：

angular.module('myapp', []).service('TagService', function ($http, CONSTANTS) {
    this.tagsData = {};

    this.getTagsData = function (cacheMode) {
        if (JSON.stringify(this.tagsData) != "{}") {
            console.log("returning from cache");
            return this.tagsData;
        }

        $http({
            method: 'GET',
            url: CONSTANTS['base_url_s'] + 'api/v1/get_all_tags_data/',
            params: {'params': JSON.stringify({})}
        }).success(
            function (data, status, headers, config) {
                if (data && data["success"] && data["success"] == true) {
                    this.tagsData = data["data"];
                }
                return this.tagsData;

            }).error(
            function (data, status, headers, config) {
                return {};
            });

    };
});

Answer 1

您不应在函数中使用 this。 this 关键字是函数范围的。您没有在回调和第一个条件中更新相同的变量。

angular.module('myapp', []).service('TagService', function ($http, CONSTANTS) {
var tagsData = {};

this.getTagsData = function (cacheMode) {
    if (JSON.stringify(tagsData) != "{}") {
        console.log("returning from cache");
        return tagsData;
    }

    $http({
        method: 'GET',
        url: CONSTANTS['base_url_s'] + 'api/v1/get_all_tags_data/',
        params: {'params': JSON.stringify({})}
    }).success(
        function (data, status, headers, config) {
            if (data && data["success"] && data["success"] == true) {
                tagsData = data["data"];
            }
            return tagsData;

        }).error(
        function (data, status, headers, config) {
            return {};
        });

};
});

还有一件事，你必须使用 promise 而不是返回你的数据。 Check the documentation about $q here.

正确的方法应该是：

angular.module('myapp', []).service('TagService', function ($http, CONSTANTS, $q) {
var tagsData = {};

this.getTagsData = function (cacheMode) {
    var defer = $q.defer();
    if (JSON.stringify(tagsData) != "{}") {
        console.log("returning from cache");
        defer.resolve(tagsData);
    }else{

    $http({
        method: 'GET',
        url: CONSTANTS['base_url_s'] + 'api/v1/get_all_tags_data/',
        params: {'params': JSON.stringify({})}
    }).success(
        function (data, status, headers, config) {
            if (data && data["success"] && data["success"] == true) {
                tagsData = data["data"];
            }
            return defer.resolve(tagsData);

        }).error(
        function (data, status, headers, config) {
            return defer.reject({});
        });

    };
    }
    return defer.promise;
});

然后你应该调用：

TagService.getTagsData().then(function(yourTags){
    // yourTags contains your data
});

angular 服务中的数据对象变量通过 ajax 调用更新

Data object variable in angular service to update via ajax call

javascript

ajax

jquery

angularjs

angularjs-service