AngularJS等待外部函数响应继续

Question

我的控制器上有这个功能：

   // Get a specific Parte
    partesc.getParte = function (id) {
            var url = endpointApiURL.url + "/fabricante/" + id;
            $scope.PartesPromise = $http.get(url)
                .then(function (response) {
                    partesc.parte= response.data;
                })
                .catch(function (error) {
                    console.log(error);
                    if (error.status == '412') {
                        console.log('Error obteniendo datos: ' + error.data.error);
                    }
                });
        }

我还有第二个功能：

partesc.openEdit = function(id) {
partesc.getParte(id);
    console.log(partesc.parte); }

我从前端的按钮调用 openEdit 函数。所以 console.log 部分打印未定义。我认为这不是在等待调用函数 getParte(id) 的响应。

我怎样才能让它等待函数的响应来打印结果？我做错了吗？

更新 1

console.log仅供参考。我需要使用 return 另一个函数 (getParte) 在另一个函数 (openEdit)

中的数据

解决方案

感谢我在此处接受的答案，我找到了解决方案。

        // Get a specific Parte
    partesc.getParte = function (id) {
            var url = endpointApiURL.url + "/fabricante/" + id;
             return $http.get(url)
                .then(function (response) {
                    partesc.parte= response.data;
                })
                .catch(function (error) {
                    console.log(error);
                    if (error.status == '412') {
                        console.log('Error obteniendo datos: ' + error.data.error);
                    }
                });
        }


partesc.openEdit = function(id) {
    $scope.PartesPromise = partesc.getParte(id)
                            .then(function() {
                                console.log(partesc.parte);
                                }); 
}

谢谢

Answer 1

在 then 函数中使用 console.log。

partesc.getParte = function (id) {
            var url = endpointApiURL.url + "/fabricante/" + id;
            $scope.PartesPromise = $http.get(url)
                .then(function (response) {
                    partesc.parte= response.data;
                    console.log(partesc.parte);
                })
                .catch(function (error) {
                    console.log(error);
                    if (error.status == '412') {
                        console.log('Error obteniendo datos: ' + error.data.error);
                    }
                });
        }

因为这是异步调用，下一行代码在您的函数调用后执行，直到那时没有响应，所以您在函数外部获得未定义的值。

Answer 2

您可以使用 promise 这样做：

partesc.getParte = function (id) {
        var url = endpointApiURL.url + "/fabricante/" + id;
        return $scope.PartesPromise = $http.get(url)
            .then(function (response) {
                partesc.parte= response.data;
            })
            .catch(function (error) {
                console.log(error);
                if (error.status == '412') {
                    console.log('Error obteniendo datos: ' + error.data.error);
                }
            });
    }

这将 return 承诺，因此您可以在控制器中等待解析或拒绝，如下所示：

partesc.openEdit = function(id) {
    partesc.getParte(id).then(function() {
        console.log(partesc.parte);
    }); 
}

Answer 3

那么如果你能return承诺：

 partesc.getParte = function (id) {
     var url = endpointApiURL.url + "/fabricante/" + id;
     return $http.get(url);
 };

partesc.openEdit = function(id) {
    partesc.getParte(id).then(function(response){
    // stuff you want to do
    });
};

Answer 4

您可以使用 $q 服务来解决问题

// 在控制器中注入$q

partesc.getParte = function (id) {
           var deferred = $q.defer(),
              url = endpointApiURL.url + "/fabricante/" + id;
            $scope.PartesPromise = $http.get(url)
                .then(function (response) {
                    partesc.parte= response.data;
                    deferred.resolve(response.data);
                })
                .catch(function (error) {
                    console.log(error);

                    if (error.status == '412') {
                        console.log('Error obteniendo datos: ' + error.data.error);
                    }

                 deferred.reject(error);
                });

           return deferred.promise;
        }

并且使用上面的函数如下：

partesc.openEdit = function(id) {
partesc.getParte(id).then(function(response){
       partesc.parte = response
       console.log(partesc.parte);
      })
      .catch(function(error){
      }); 
}

Answer 5

You can return promise and from the function use it as below:

angular.module("myApp",[])
.controller('ctr1', function(sample){
 sample.sampleFn().then(function(data){
  console.log(data);
 })
})
.factory('sample', function($http){
  return {
    sampleFn : sampleFn
  }

 function sampleFn(){
    return $http.get('response.json').then(function(response){
            return response.data;
         }, function(){
            $q.reject("Failed");
        })
 }
})

Sample Working Plunk

AngularJS等待外部函数响应继续

AngularJS wait for external function response to continue

http

function

response

angularjs