如何在angularjs中等待直到响应来自$ http请求？

一尘不染

如何在angularjs中等待直到响应来自$ http请求？

angularjs

我正在使用来自多个页面中RESTful服务的一些数据。所以我为此使用了角度工厂。因此，我需要从服务器获取一次数据，并且每次我使用该定义的服务获取数据时。就像全局变量一样。这是示例：

var myApp =  angular.module('myservices', []);

myApp.factory('myService', function($http) {
    $http({method:"GET", url:"/my/url"}).success(function(result){
        return result;
    });
});

在我的控制器中，我将此服务用作：

function myFunction($scope, myService) {
    $scope.data = myService;
    console.log("data.name"+$scope.data.name);
}

根据我的要求，它对我来说很好。但是这里的问题是，当我重新加载网页时，该服务将再次被调用并请求服务器。如果在其他函数之间执行依赖于“已定义的服务”的函数，则会出现类似“某物”未定义的错误。因此，我想在脚本中等待直到服务加载。我怎样才能做到这一点？无论如何，在angularjs中这样做吗？

阅读 487

2020-07-04

共1个答案

一尘不染

您应该在不知道何时完成的异步操作中使用Promise。承诺“表示尚未完成的操作，但有望在将来进行。”
（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise）

一个示例实现如下：

myApp.factory('myService', function($http) {

    var getData = function() {

        // Angular $http() and then() both return promises themselves 
        return $http({method:"GET", url:"/my/url"}).then(function(result){

            // What we return here is the data that will be accessible 
            // to us after the promise resolves
            return result.data;
        });
    };


    return { getData: getData };
});


function myFunction($scope, myService) {
    var myDataPromise = myService.getData();
    myDataPromise.then(function(result) {

       // this is only run after getData() resolves
       $scope.data = result;
       console.log("data.name"+$scope.data.name);
    });
}

编辑：关于Sujoys的注释， 我需要做什么才能使myFuction（）调用在.then（）函数完成执行之前不会返回。

function myFunction($scope, myService) { 
    var myDataPromise = myService.getData(); 
    myDataPromise.then(function(result) { 
         $scope.data = result; 
         console.log("data.name"+$scope.data.name); 
    }); 
    console.log("This will get printed before data.name inside then. And I don't want that."); 
 }

好吧，让我们假设对getData（）的调用花费了10秒来完成。如果该函数在那时没有返回任何内容，它将有效地变为普通的同步代码，并会挂起浏览器直到完成。

尽管Promise会立即返回，但同时浏览器可以自由继续其他代码。一旦承诺解决/失败，就会触发then（）调用。因此，即使它可能使您的代码流变得更复杂，这种方式也更加有意义（毕竟，复杂性通常是异步/并行编程的普遍问题！）

2020-07-04