当前位置: 首页 > 面试题库 >

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

欧阳洲
2023-03-14
问题内容

我正在使用来自多个页面中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中这样做吗?


问题答案:

您应该在不知道何时完成的异步操作中使用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()调用。因此,即使它可能使您的代码流变得更复杂,这种方式也更加有意义(毕竟,复杂性通常是异步/并行编程的普遍问题!)



 类似资料:
  • 是否可以在不等待响应的情况下发送HTTP请求? 我在做一个物联网项目,需要记录传感器的数据。在每一个设置中,都有许多传感器,一个中央协调器(主要由Raspberry Pi实现)从传感器收集数据,并通过Internet将数据发送到服务器。 提前感谢! 编辑:传感器是无线的,但他们使用的技术在发送到协调器时很少(或没有)延迟。此协调器必须通过Internet发送数据。但是,假设互联网连接不好。因为这将

  • 我在Spring启动时使用webClient提出请求,这里是上面的请求: 我的问题是如何在执行另一条指令之前等待请求的结果

  • 问题内容: PHP会以1-2秒的延迟返回值jQuery.post不等待响应。 您如何看待,是否有可能解决该问题并等待响应? 注意 与get相同的功能效果很好 问题答案: $ .post是异步的,您需要使用$ .ajax并将async设置为false,这样您就可以等待响应。您可以在此处了解更多信息: http //api.jquery.com/jQuery.ajax/

  • 问题内容: 我正在开发Chrome中的扩展程序,但我想知道:找出元素何时存在的最佳方法是什么?使用纯JavaScript,间隔检查直到元素存在,或者jQuery是否有一些简单的方法来执行此操作? 问题答案: 由于性能问题,不建议将其与其他DOM突变事件一起弃用- 推荐的方法是使用MutationObserver来监视DOM。不过,只有新的浏览器才支持此功能,因此您应该在不可用时退回。

  • 问题内容: 我有该代码: 它可以很好地上传图像,但是问题是我找不到一种逐一上传图像的方法,我试图将 async 选项 设置为false, 但是它冻结了网络浏览器,直到所有图像都被上传为止,这不是我所需要的。想要,我想以某种方式模拟此 “ async:false” 选项以执行相同的操作,但不冻结Web浏览器。 这该怎么做 ? 问题答案: 您可以创建一个Promise数组,以便在所有Promise都解

  • 问题内容: 如何让selenium等待日历小部件的加载?现在,我只是在将测试用例导出到junit程序后进行操作。 问题答案: 我会用 这将一直等待,直到元素出现在DOM中为止。 如果您需要检查元素是否可见,则最好使用