AngularJS等待外部函数响应继续答案

【问题标题】：AngularJS wait for external function response to continueAngularJS等待外部函数响应继续
【发布时间】：2017-02-02 15:51:19
【问题描述】：

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

   // 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 仅供参考。我需要使用在另一个函数（openEdit）中返回另一个函数（getParte）的数据

解决方案

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

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

谢谢

【问题讨论】：

你能从这里登录吗？ $http.get(url) .then(function (response) { partesc.parte= response.data; console.log(partesc.parte); })
你可以从函数本身返回promise，然后在返回的promise对象上使用.then(successCallback)。
@Groben 是的...这带来了一个带有数据的对象。
你想做什么？
我更新了我的答案，请参阅更新 1 我的朋友@Groben 谢谢

标签： angularjs function http response

【解决方案1】：

那么如果你能回报承诺：

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

【讨论】：

这对我的朋友有用。非常感谢！谢谢你，我更新了我的答案。
小心，我认为您更新答案的方式不允许您的代码工作。

【解决方案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);
                }
            });
    }

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

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

【讨论】：

我的朋友试试这个，我遇到了一个错误：“TypeError: Cannot read property 'then' of undefined”

【解决方案3】：

使用console.log里面的then函数。

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

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

【讨论】：

感谢您的回答...console.log 仅供参考。我需要使用在另一个函数（openEdit）中返回另一个函数（getParte）的数据
您可以调用openEdit，返回的数据代替console.log

【解决方案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){
      }); 
}

【讨论】：

【解决方案5】：

您可以返回 promise 并从函数中使用它，如下所示：

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

【讨论】：

Grt。乐于助人:-)