AngularJS:如何获取 $http 结果作为函数的返回值? [英] AngularJS: How to get $http result as returned value of a function?

问题描述

在我的控制器中，我需要一个函数，它接受一个参数并从服务器返回一个 URL.像这样:

$scope.getPoster = function(title) {return $http.get("http://www.omdbapi.com/?t=" + title + "&y=&plot=short&r=json");};

在我的视图中，我需要以这种方式传递标题并为 ng-src 获取结果为 src :

<div class="缩略图"><img class="poster" ng-src="{{getPoster(movie.Title)}}" alt="{{movie.Title}}"><div class="caption"><h3>{{movie.Title}}</h3><p>{{movie.Owner}}</p>

我知道 $http 上的 HTTP 通信永远不会立即返回我需要的数据，因为所有通信都是异步的所以我需要使用 promise:

$scope.getPoster = function(title) {$http({ url: "http://www.omdbapi.com/?t=" + 标题 + "&y=&plot=short&r=json" }).然后(功能(响应){//我怎样才能返回 response.data.Poster ?});};

所以我的问题是如何将响应作为 getPoster 函数的结果返回?
有什么想法吗?

解决方案

如果你将 movie 传递给 getPoster 函数，而不是 title，它应该工作；并将变量绑定到 ng-src 而不是 getPoster 函数的返回，它应该可以工作.

此外，您可以在等待响应时显示占位符:

HTML:

_{* 请注意，ng-init 当然可以替换为控制器内初始化.}

JS:

$scope.getPoster = 函数(电影){$http({ url: "http://www.omdbapi.com/?t=" + movie.Title+ "&y=&plot=short&r=json" }).then(功能(响应){电影.imgUrl = response.data.Poster;});返回/img/poster-placeholder.png"；};

一旦返回 response，movie.imgUrl 就会改变.

因此，图像将在下一个摘要周期中使用新源自动更新.

在这个例子中，你不需要返回承诺.

Inside my controller I need a function that takes a parameter and returned a URL from server. Something like this:

$scope.getPoster = function(title) {
    return $http.get("http://www.omdbapi.com/?t=" + title + "&y=&plot=short&r=json");
};

And inside my view I need to pass the title this way and get result as src for ng-src:

<div class="col-sm-6 col-md-3" ng-repeat="movie in movies">
    <div class="thumbnail">
        <img class="poster" ng-src="{{getPoster(movie.Title)}}" alt="{{movie.Title}}">
        <div class="caption">
            <h3>{{movie.Title}}</h3>
            <p>{{movie.Owner}}</p>
        </div>
    </div>
</div>  

I know the HTTP communications on $http never ever return data that I need immediately because all communications are asynchronous So I need to use promise:

$scope.getPoster = function(title) {
    $http({ url: "http://www.omdbapi.com/?t=" + title + "&y=&plot=short&r=json" }).
    then(function (response) {
        // How can I return response.data.Poster ? 
    });
};

So my question is that How can I return the response as result for getPoster function?
Any idea?

解决方案

If you pass movie to getPoster function, instead of title, it should work; and bind a variable to ng-src instead of the return of the getPoster function, it should work.

Also, you could display a placeholder while you are waiting for the response:

HTML:

<img class="poster"
     ng-init="movie.imgUrl = getPoster(movie)"
     ng-src="{{movie.imgUrl}}"
     alt="{{movie.Title}}">

_{* Note that ng-init could certainly be replaced with an in-controller initialization.}

JS:

$scope.getPoster = function(movie) {
    $http({ url: "http://www.omdbapi.com/?t=" + movie.Title+ "&y=&plot=short&r=json" })
    .then(function (response) {
        movie.imgUrl = response.data.Poster;
    });
    return "/img/poster-placeholder.png";
};

Once the response is returned, movie.imgUrl is changed.

So, the image will automatically be updated with the new source in the next digest cycle.

With this example, you won't need to return the promise.

这篇关于AngularJS:如何获取 $http 结果作为函数的返回值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！