在Angular中如何通过factory函数正确返回$http.post()对象？

问题原因 #

• 核心错误是 then 方法的参数括号位置写错：你当前的写法是 $http.put(...).then(成功回调函数), 错误回调函数，这里逗号运算符会先执行前面的then调用，再把后面的错误回调函数作为整个表达式的返回值，所以你return的不是Promise对象，自然不能链式调用.then()，就会触发对应报错。
• 其次成功回调中没有返回处理后的数据，导致后续链式调用的then拿到的参数是undefined
• 错误回调中用到的status变量没有声明，你需要从请求响应参数中获取
• 额外小问题：create方法内遗漏了loaderShow调用，触发请求时不会展示加载动画

修正后的代码 #

AngularUtils.js #

Fenrir.factory('AngularUtils', function ($http, $log, $window) {

var AngularUtils = {
    save: function(url, obj, errors, not_show_error_toast) {            
        not_show_error_toast = typeof not_show_error_toast !== 'undefined' ? not_show_error_toast : false;
        loaderShow();
        if (angular.isDefined(obj.id)) {
            // 修正：把错误回调放到then的括号内，成功回调返回结果
            return $http.put(url + obj.id + '/', obj).
                then(function onSuccess(response) {
                    loaderHide();
                    angular.extend(obj, response);
                    errors = {};
                    // 把处理后的结果返回给后续链式调用
                    return obj;
                }, function onError(response, status) {
                    loaderHide();
                    handleErrors(response, status, errors, not_show_error_toast);
                });
        } else {
            return this.create(url, obj, errors, not_show_error_toast);
        }
    },
    create: function(url, obj, errors, not_show_error_toast) {            
        not_show_error_toast = typeof not_show_error_toast !== 'undefined' ? not_show_error_toast : false;
        loaderShow();
        // 同样修正括号位置和返回值
        return $http.post(url, obj).
            then(function onSuccess(response) {
                loaderHide();
                angular.extend(obj, response);
                errors = {};
                return obj;
            }, function onError(response, status) {
                loaderHide();
                handleErrors(response, status, errors, not_show_error_toast);
            });
    },
}

   return AngularUtils
})

Admin.js 可选优化 #

你调用save的时候传的第三个参数是空字符串，第四个也是空字符串，第三个参数预期是errors对象，第四个是布尔值，建议调整为符合参数预期的传值：

var Fenrir = angular.module('Fenrir', []);

Fenrir.controller('AdminController', function ($scope, $http, AngularUtils) {
    $scope.createScreen = function () {
        // 第三个参数传空对象存储错误信息，第四个参数传布尔值控制是否显示错误提示
        AngularUtils.save('/admin/saveScreen', $scope.record, {}, false).then(function (hubs) {
            $scope.hubs = hubs;
            console.log('In ctrl ' + $scope.hubs);
        });
    }
})

内容的提问来源于stack exchange，提问作者TheVicShow