angularjs中的异步调用答案

【问题标题】：Asynchronus calls in angularjsangularjs中的异步调用
【发布时间】：2015-01-06 14:22:28
【问题描述】：

我是 Javascript 和 Angularjs 的新手。我想知道，如何在不等待函数返回的情况下异步调用函数。

请告诉我，如果有一些例子，那将非常有帮助。

问候， ng

【问题讨论】：

Angular Docs $http

标签： javascript angularjs asynchronous

【解决方案1】：

使用 Angular 的deferred:

function myAsyncFunction() {
    var deferred = $q.defer();

    //..
    setTimeout(function() {
        deferred.resolve({ message: "resolved!" });
        // or deferred.reject({ message: "something went terribly wrong!!" });
    }, 1000);
    //..

    return deferred.promise;
}

myAsyncFunction()
    .then(function(data){
        // success
        console.log("success", data.message);
    }, function(data) {
        // fail
        console.log("error", data.message);
    }).finally(function() {
        // always
    });

【讨论】：

【解决方案2】：

你可以使用deferred 来返回一个promise，然后你可以在你的函数完成后解决这个promise。试试这样的：

http://jsfiddle.net/adcoxwga/

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

.service('myService', function($q, $timeout){

    this.someFunction = function(){
        var deferred = $q.defer(); //making a new deferred

        $timeout(function(){
            deferred.resolve('something'); //resolving the deferred with a response
        }, 3000);

        return deferred.promise; //returning a promise
    }

})

.controller('MyCtrl', function($scope, myService){

    myService.someFunction().then(function(response){ //calling the asynchronous function
       console.log(response); //getting response
    }, function(error){
        console.log(error); //getting error
    });

});

【讨论】：

是否需要超时？

【解决方案3】：

您有几个不同的选择，但需要注意的一点是，您必须使用回调或承诺进行异步活动。由于您使用的是角度，我建议使用promise's。

使用承诺

如果您正在编写对 api 的 http 调用，您可以使用 $http 或 $resource。如果您开始研究 Angular 提供程序，您会看到 $http 返回一个承诺，而 $resource 返回一个承诺，但您必须专门调用它才能访问它。例如：

一些服务

function someServiceFunction () {
  return $http.get('some/url');
}

一些控制器

$scope.results = [];
someService.someServiceFunction().then(function(data) {
    $scope.results = data;
});

需要注意的是，第一个返回的函数是成功的场景，如果你声明了第二个回调，那么它就是失败的场景。

如果您要在同一场景中使用回调：

使用回调

一些服务

function someServiceFunction (callback) {
  return $http.get('some/url')
           .success(callback);
}

一些控制器

$scope.results = [];
someService.someServiceFunction(function(data, status, headers, config) {
    $scope.results = data;
});

这是$http provider 的链接。这是$resource provider的链接。

干杯！

【讨论】：