Question

我希望我的应用程序对RESTful Web服务进行Ajax调用。在我的html文档中有两个连接到范围对象的文本框。两个字段都通过ng-change连接到“post”功能。 post方法将范围内的“form”变量发送到API，webservice添加两个数字并使用json文件进行响应，该文件现在包含结果。（这可能不是非常RESTful但它适用于我）

只要我在控制器中进行Ajax调用就可以完美地运行：

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调用放入服务中。

新服务如下所示：

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;

      };
    }]);

在控制器中，我这样称呼服务：

[...]

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

[...]

根本不起作用。所以我在服务中添加了这三个警报。当我在浏览器中打开我的应用程序时会发生的情况是，当我更改字段时，弹出的第一个警报是名为“Result1”的警报，然后是“Result3”，然后是“Result2”。 Result2甚至显示正确的结果。所以我的服务中的“post”函数似乎不等待ajax调用完成。

有人知道如何解决这个问题吗？

Answer 1

ajax / http类是异步的...... ajax本身意味着异步。 {{3P>

所以代码继续执行下一个par并且不要等待响应......

Answer 2

这里的问题是您正在处理异步进程。 alert('Result3: ' + myData.result);将在alert('Result2: ' + myData.result);之前发生，因为http GET将需要更长时间。 My best advice is to see this stackoverflow question and response by the create of angularjs

此外，如果您正在使用RESTful服务，请考虑查看ngResource。它将极大地简化您的代码。

AngularJS Ajax呼叫服务

2 个答案: