angularJS中的同步http调用

Question

我有以下场景,我需要来自特定网址的数据.我写了一个带参数'url'的函数.在函数内部,我有$ http.get方法,它调用url.数据将返回到调用函数

var getData = function (url) {
    var data = "";

    $http.get(url)
        .success( function(response, status, headers, config) {
             data = response;
        })
        .error(function(errResp) {
             console.log("error fetching url");
        });
    return data;
}

问题如下,$ http.get是异步的,在获取响应之前,函数返回.因此,调用函数将数据作为空字符串获取.在从URL中提取数据之前,如何强制函数不返回？

Answer 1

看看有望克服这些问题的承诺,因为它们在角落世界中被广泛使用.

你需要使用$ q

var getData = function (url) {
    var data = "";
    var deferred = $q.defer();

    $http.get(url)
        .success( function(response, status, headers, config) {
             deferred.resolve(response);
        })
        .error(function(errResp) {
             deferred.reject({ message: "Really bad" });
        });
    return deferred.promise;
}

这是关于promises和$ q的好文章

更新:

仅供参考,$http服务本身会返回一个承诺,因此$q在这种情况下不一定需要(因此也是反模式).

但是,不要让这成为跳过阅读关于$ q和承诺的理由.

所以上面的代码相当于以下内容:

var getData = function (url) {
    var data = "";
    return $http.get(url);
}

Answer 2

您也可以使用$ q.all()方法来解决此问题

var requestPromise = [];

var getData = function (url) {
    var data = "";

    var httpPromise = $http.get(url)
        .success( function(response, status, headers, config) {
             data = response;
        })
        .error(function(errResp) {
             console.log("error fetching url");
        });

    requestPromise.push(httpPromise);
}

在调用函数中

$q.all(requestPromise).then(function(data) {

    //this is entered only after http.get is successful
});

确保将$ q作为依赖项注入.希望能帮助到你

Answer 3

你的功能似乎多余.只是使用$http.get(url),因为你还没有做任何其他事情,无论如何使用它.

var url = 'foo/bar';

$http
    .get(url)
    .success( function(response, status, headers, config) {
        $scope.data = response;
    })
    .error(function(errResp) {
        console.log("error fetching url");
    });

或者如果您以后需要访问承诺,只需将其分配给变量;

var promise = $http.get(url);

// some other code..

promise.then(function(data){
   //.. do something with data
});