如何使用promise与angular实现ajax调用？

Question

我正在尝试使用包装在“服务”中的$ q使用角度承诺，并从我的控制器中调用它。 这是代码：

var myController = function ($scope, myService) {
    $scope.doSomething = function (c, $event) {
        $event.preventDefault();
        myService.method1(c).then(function (rslt) {
            alert(rslt);
        }, function (err) {
            alert(err);
        }).then(function () {
            //clean up
        });        
    };
};
var myApp = angular.module('myApp', [])
    .factory('myService', function($q) {
        function _method1(c) {
            var dfr = $q.defer();

            var dt = { sc: c };
            $.ajax({
                type: "POST",
                url: "mypage.aspx/mymethod",
                data: JSON.stringify(dt),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    dfr.resolve('actions sucess');
                },
                error: function (msg) {
                    dfr.reject(msg);
                }
            });
            return dfr.promise;
        }
        return { method1: _method1 };
    }).controller('myController', myController);

问题是'alert（rslt）;' 一段代码永远不会执行。 调用服务并更新数据，但是在第一次单击时未达到第一个“ then”功能。

我究竟做错了什么？ 任何帮助表示赞赏。

Answer 1

我建议您使用$http和$resource代替$.ajax

以下是$http的示例

myApp.factory('MyService',
[
    '$http',
    '$q',
    '$resource',
function (
    $http,
    $q,
    $resource
) {
    return {
        doSomething : function (somedata) {
            var deferred = $q.defer();

            $http({ method: 'POST', url: '"mypage.aspx/mymethod"', data: somedata }).
                success(function (data, status, headers, config) {
                    deferred.resolve(true);
                }).
                error(function (data, status, headers, config) {
                    deferred.resolve(false);
                });
            return deferred.promise;
        }
    };
}]);

Answer 2

只需将依赖项添加到$rootScope并在$.ajax()两个回调中调用$rootScope.$apply() $.ajax() ：

success: function () {
    dfr.resolve('actions sucess');
    $rootScope.$apply();
}, ...

但更好的是，使用Angular的$http服务 。