Angularjs$http等待响应

Angularjs $http wait for response

本文关键字：响应 等待 http Angularjs      更新时间：2023-09-26

我是javascript/angularjs的新手。当鼠标悬停在某些元素上时，我想显示一个引导程序弹出窗口。

我为创建了一个指令

(function(angular, app) {
  app.directive('popOver',["$window","$http",function($window,$http){
    return function(scope,elem,attrs){
      elem.on('mouseover',function(){
        console.log('mouseover');
        var data = scope.$apply(attrs.popOver);
        console.log('in directive again');
        console.log(data);
      });
    };
  }]);
})(angular, app);

指令的值是一个函数

<span class="asdf" pop-over="getVCard(id)">name</span>

函数vcard（id）是在我的angularjs控制器中定义的。它检查数据是否已经存在于本地存储中，如果存在，则返回数据。否则，它将执行$http-get请求，并将数据存储在本地存储中。

$scope.getVCard = function(id){
  var vcardKey = vcardKeyPrefix+id;
  var vCardFromLS = localStorageService.get(vCardKey);
  if(vCardFromLS){
    return localStorageService.get(vCardKey);
  }
  $http.get(app.common.vcardUrl(id)).
    success(function(data){
      localStorageService.set(vCardKey,data);
    }).
    error(function(error){
      F1.common.error(data,function(){});
    });
    return localStorageService.get(vCardKey);
};

由于$http返回promise，我在指令中得到了一个未定义的值。如何确保函数getVCard同步返回？

我在谷歌上搜索了很多结果。但建议的想法是使用回调。但我不确定回调将如何实现同步。感谢您的帮助。

更新1（针对Foo L的评论）我计划在多个地方使用相同的指令。vcards和产品信息的popovers等等。唯一不同的是popover指令的参数。这样的话，指令只会显示弹出窗口。数据的获取位置将在一个单独的函数中，该函数将传递给指令

不能强制$http.get()同步。由于$http.get()不可避免地是异步，因此只能返回值的promise，而不能返回值本身。

因为在调用$http.get()时需要这样做，所以在另一个条件下也必须返回promise——当vCardFromLS从本地存储中成功检索时。这确保了返回给$scope.getVCard()的任何调用的对象都有一个.then()方法，即无论是否调用了$http.get()，它都是一个promise。

所以代码应该是这样的：

$scope.getVCard = function(id) {
    var vcardKey = vcardKeyPrefix + id;
    var vCardFromLS = localStorageService.get(vCardKey);
    var dfrd = $q.defer();
    if(vCardFromLS) {
        dfrd.resolve(localStorageService.get(vCardKey));
    }
    else {
        $http.get(app.common.vcardUrl(id)).success(function(data) {
            localStorageService.add(vCardKey, data);//.add() rather than .set() ?
            dfrd.resolve(data);
        }).error(function(error) {
            F1.common.error(data, function() {
                dfrd.reject('$http.get(app.common.vcardUrl(id)) failed');
            });
        });
    }
    return dfrd.promise;
};

现在，您需要确保对$scope.getVCard()的响应得到适当处理，例如：

$scope.getVCard(id).then(function(data) {
    //success - do whatever is required with data
}, function(reason) {
    //failure - log and/or display `reason` as an error message
})

编辑：

我的"…在其他条件下，你必须也返回承诺……"言过其实。

我应该说，"……你可以，为了让事情变得简单，在其他条件下返回承诺…"。

另一种可能性是根据返回的是Promise还是其他类型的对象/值进行分支。然而，这是混乱的，通常会导致一些代码的重复。

相关文章：