Question

我有以下服务：

app.factory('ParserWebService', function($http, $q, $timeout){
    ParserWebService.getParserPfList = function() {

        var pfData = $q.defer();
        var pfList = [];

        $http.get("https://myurl/parserpf")
            .then(function(response) {

                var reponseDataJSON = JSON.parse(response.data);

                for (var el in reponseDataJSON) {
                    if (reponseDataJSON[el].pf.length > 0) {  // Check for non-empty string
                        pfList.push(reponseDataJSON[el]);
                    }
                }
console.log("http GET SUCCESS");
console.log("pfList.length: " + pfList.length);

            })
            .catch(function(response) {
                console.error('GET error', response.status, response.data);
            })

console.log(pfList[0]);

        $timeout(function(){
            pfData.resolve(pfList);
        },1000);

console.log("pfList.length: " + pfList.length);
console.log("pfData.promise.length: " + pfData.promise.length);
        return pfData.promise;
    }

  return ParserWebService;
});

当我调用它时，我首先得到错误，因为服务在返回之前根据控制台打印输出没有返回任何内容（见下文）。只有在那之后，我才在控制台上看到$ http成功且pfList.lenght为109的打印输出（见下文）。

pfList.length: 0            <------------------
pfData.promise.length: undefined        <----------------
mopidId = 0, id = null
angular.js:11607 TypeError: Cannot read property 'id' of undefined
    at new <anonymous> (controllers.js:32)
    at Object.e [as invoke] (angular.js:4185)
    at $get.w.instance (angular.js:8454)
    at angular.js:7700
    at s (angular.js:331)
    at A (angular.js:7699)
    at g (angular.js:7078)
    at g (angular.js:7081)
    at g (angular.js:7081)
    at angular.js:6957(anonymous function) @ angular.js:11607$get @ angular.js:8557$get.l.$apply @ angular.js:14502(anonymous function) @ angular.js:1448e @ angular.js:4185d @ angular.js:1446tc @ angular.js:1466Jd @ angular.js:1360(anonymous function) @ angular.js:26176m.Callbacks.j @ jquery.js:3148m.Callbacks.k.fireWith @ jquery.js:3260m.extend.ready @ jquery.js:3472J @ jquery.js:3503
models.js:599 http GET SUCCESS   <---------------
models.js:600 pfList.length: 109  <---------------

这看起来像是竞争条件。为什么会发生这种情况以及如何解决？感谢。

Answer 1

我认为你制造的东西过于复杂。

$http返回一个promise本身，所以只需从函数中返回它，你就不需要$q或奇怪的超时。见下文

app.factory('ParserWebService', function($http){
    ParserWebService.pfList=[];

    ParserWebService.getParserPfList = function() {

        return $http.get("https://myurl/parserpf")
            .then(function(response) {

                var reponseDataJSON = JSON.parse(response.data);

                for (var el in reponseDataJSON) {
                    if (reponseDataJSON[el].pf.length > 0) {  // Check for non-empty string
                        ParserWebService.pfList.push(reponseDataJSON[el]);
                    }
                }
            })
            .catch(function(response) {
                console.error('GET error', response.status, response.data);
            })
    }

  return ParserWebService;
});

第一个console.log没有数据的原因是因为它不在then块中，所以它在$http调用有机会完成之前执行。

如果您使用上述代码来链接事件，您可以像这样使用

ParserWebService.getParserPfList.then(function(){
    console.log("All the data is here: ",ParserWebService.pfList);
})

如果您确定要求函数返回函数中的数据，您可以改变代码，如下所示：

ParserWebService.getParserPfList = function() {

    var pfData = $q.defer();
    var pfList = [];

    $http.get("https://myurl/parserpf")
        .then(function(response) {

            var reponseDataJSON = JSON.parse(response.data);

            for (var el in reponseDataJSON) {
                if (reponseDataJSON[el].pf.length > 0) {  // Check for non-empty string
                    pfList.push(reponseDataJSON[el]);
                }
            }
            pfData.resolve(pfList);

        })
        .catch(function(response) {
            console.error('GET error', response.status, response.data);
            pfData.reject();
        })

    return pfData.promise;
}

最后的注意事项：如果你指定你希望JSON的http调用你之后不需要解析它

AngularJS中带有$ http的竞争条件

1 个答案: