等待AngularJS中的http响应

Question

我正在使用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（）函数，并在返回结果之前执行其他后续操作，而我需要该结果结果马上。 因此，基本上我需要帮助来了解如何让服务在退出之前等待结果。

谢谢。

Answer 1

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

首先更改您的服务以返回一个Promise实例：

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