javascript - 如何使用 Promise 和 Angular 实现 Ajax 调用？

Question

我正在尝试使用包装在“服务”中的 $q 来使用 Angular promise ，并从我的 Controller 调用它。 这是代码:

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);”一段代码永远不会被执行。 调用服务并更新数据，但第一次单击时未达到第一个“然后”功能。

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

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;
        }
    };
}]);