等待AngularJS中的http响应

时间:2018-09-27 22:29:33

标签: javascript angularjs http

我正在使用angularJS,并且我正在尝试使用这样的服务从后端获取结果:

app.factory('myService', ['$http', '$window', '$rootScope', function ($http, $window, $rootScope) {

return {
    GetTypeName(typeID, callback) {
        $http.get(backend_url + 'type/getById/' + typeID)
            .success(function (response, status, headers, config) {

                if (status === 200) {
                    callback(true, response);
                } else {
                    callback(false);
                }
            })
            .error(function (data, status, headers, config) {
                callback(false);
            });
    }
}   }]);

我正在从此控制器调用该服务:

getFormationsType = function(){
 for (i = 0; i!= array.length;i++){
     myService.GetTypeName(typeID, function (result, data) {
         if(result){
             console.log(data.name);
             // do something with data.name here, and also need it outside of this func
         } else{
             console.log("error");
         }
     });
 }}

问题在于,当函数执行服务时,它不等待结果,而是跳出getFormationsType()函数,然后执行其他后续操作,然后返回结果,并且我马上就需要那个结果。 因此,基本上我需要帮助来了解如何让服务在退出之前等待结果。

谢谢。

1 个答案:

答案 0 :(得分:0)

angularjs仅与$q实现的promise一起使用,因此您不能使用es6的promise和async / await。您可以像这样通过$q实现目标:

首先进行服务更改以返回承诺实例:

app.factory('myService', ['$http', '$window', '$rootScope', '$q', function ($http, $window, $rootScope, $q) {

    return {
        getTypeName(typeID) {
            var deferred = $q.defer();
            $http.get(backend_url + 'type/getById/' + typeID)
                .success(function (response, status, headers, config) {

                    if (status === 200) {
                        deferred.resolve({ success: true, data: response });
                    } else {
                        deferred.resolve({ success: false });
                    }
                })
                .error(function (data, status, headers, config) {
                    deferred.resolve({ success: false });
                });
            return deferred.promise;
        }
    }
}]);

,然后在您的控制器中,像这样递归调用服务:

angular.controller('myController', ['myService', function (myService) {
    var array = [/* init your type id array here. */];
    var index = 0;
    function getFormationsType () {
        myService.getTypeName(this.array[this.index])
            .then(result => {
                console.log(result);
                if (this.index < this.array.length) {
                    this.index += 1;
                    getFormationsType();
                }
            })
            .catch(error => {
                console.error(error);
            });
    }
}]);