AngularJS AJAX调用的服务 [英] AngularJS Ajax Call in Service

问题描述

我想我的应用程序，使Ajax调用一个RESTful Web服务。在我的html文件是连接到一个范围对象两个文本框。这两个领域都连接到通过NG-变后功能。 POST方法将形式从变量的范围API和Web服务增加了两个号码，并用JSON文件，它现在包含的结果响应。 （这可能不是很REST风格，但它为我的作品）

I want my application to make Ajax Calls to a RESTful Webservice. In my html document are two textboxes that are connected to a scope object. Both fields are connected to the "post" function via ng-change. The post method sends the "form" variable from the scope to the API and the webservice adds both numbers and responds with a json file, which now contains the result. (This might not be very RESTful but it works for me)

它完美罚款，只要我在我的控制器，这样的Ajax调用：

It works perfectly fine as long as I have the Ajax call in my controller like this:

myApp.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.form = {
    "number1" : "",
    "number2" : "",
    "result"  : ""
};


$scope.post = function () {
    $http({
        url: "http://localhost:7777/api",
        method: "POST",
        data: $scope.form,
        headers: {'Content-Type': 'application/json'}
    }).success(function (data, status, headers, config) {
        $scope.form = data;
    }).error(function (data, status, headers, config) {
        $scope.status = status;
    });
};
}]);

现在，当然，这并不很好看。所以，我试图把Ajax调用到服务。

Now of course that does not look very nice. So I tried to put the Ajax call into a service.

这项新服务是这样的：

myApp.service('myService', ['$http', function ($http) {
      this.post = function (scopeData) {

        var myData = scopeData;

        alert('Result1: ' + myData.result);

        $http({
                url: "http://localhost:7777/api",
                method: "POST",
                data: myData,
                headers: {'Content-Type': 'application/json'}
            }).success(function (data, status, headers, config) {
                myData = data;
                alert('Result2: ' + myData.result);
            }).error(function (data, status, headers, config) {
                var status = status;
            });
        };

        alert('Result3: ' + myData.result);

        return myData;

      };
    }]);

在我的控制器调用服务是这样的：

In the controller I call the service like this:

[...]

$scope.post = function($scope.form) {
    $scope.form = myService.post($scope.form);
};

[...]

它没有在所有的工作。所以我说在服务这三个警报。什么，当我在浏览器中打开我的应用情况是，当我改变一个字段，弹出的第一个警报是一个叫结果1，然后Result3，然后结果2。 RESULT2甚至可以显示正确的结果。所以，在某种程度上看起来就好像在我的服务后功能不等待Ajax调用来完成。

It didn't work at all. So I added those three alerts in the service. What happens when I open my app in a browser is that when I change a field, the first alert that pops up is the one called "Result1", then "Result3" and then "Result2". Result2 even shows the correct result. So somehow it seems like the "post" function in my service does not wait for the ajax call to finish.

有谁知道我怎么可能解决这一问题？

Does anybody know how I might fix this?

推荐答案

这里的问题是，你正在处理异步进程。 警报（'Result3：'+ myData.result）; 会在发生警报（结果2：'+ myData.result）; 因为HTTP GET会需要更长的时间。 <一href=\"http://stackoverflow.com/questions/11850025/recommended-way-of-getting-data-from-the-server\">My最好的建议就是看到angularjs

The problem here is that you are dealing with async processes. alert('Result3: ' + myData.result); is going to happen before alert('Result2: ' + myData.result); because the http GET is going to take longer. My best advice is to see this stackoverflow question and response by the create of angularjs

此外，如果您正在使用RESTful服务，可考虑在寻找ngResource。这将极大地简化您的code。

Also, if you are working with RESTful services, consider looking at ngResource. It will simplify your code tremendously.

这篇关于AngularJS AJAX调用的服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！