控制器未使用 Angular $http 服务记录来自 Nodejs 的响应答案

【问题标题】：Controller not logging response from Nodejs using Angular $http service控制器未使用 Angular $http 服务记录来自 Nodejs 的响应
【发布时间】：2017-07-29 18:01:54
【问题描述】：

我创建了一个表单，然后单击该表单我想查看来自服务器（nosejs）的响应。在 Angular 控制器中，我正在调用该服务。当从服务本身调用时响应是可见的，但从控制器调用时什么都没有显示。

控制器：

MyApp.angular.controller("loginCtrl", function($scope, UserService){
    $scope.name = "TestName";

    $scope.check = function(user){

        UserService.createUser(user, function(response){
            $scope.userinfo = response;
            console.log("FROM Ctrlr: " + response);
        });
    }

});

服务：

MyApp.angular.factory("UserService", function($http,$location){

        var service = {
            createUser: createUser
        };

        return service;

        function createUser(user){
            $http.post("/register", user).then(function(response){

            console.log("FROM Srvc:" +response);
            });
        }
});

NodeJS：

app.post("/register", function(req, res){
    var user = req.body;
res.json(user);
});

如果我从服务调用它，我可以看到记录到控制台的响应。但是从控制器本身调用时没有响应。包含MyApp.angular.factory 和MyApp.angular.controller 的原因是我在另一个配置文件中声明了MyApp。

我做错了什么？

【问题讨论】：

UserService.createUser 方法不返回任何内容，也不接收要处理的回调。如果您没有以某种方式返回它，您怎么能期望控制器中的 response 对象？
无意冒犯兄弟/姐妹，但也许在深入研究 Angular 之类的框架之前，您可能需要先熟悉整个 JavaScript 语言。话虽如此，如果您绝对必须/想要开始深入研究 Angular，请找到一个涵盖您感兴趣的主题的好示例项目，并模仿他们所做的事情，直到您了解正在发生的事情。
@Pytth 谢谢。学习整个 JS 需要很长时间。不过谢谢。我了解了 Angular 的承诺以及这个问题的原因。不过谢谢。我明白你的意思了。

标签： javascript angularjs node.js angularjs-http

【解决方案1】：

与使用基于回调的 API 的 node.js 不同，AngularJS 框架使用基于承诺的 API。 返回承诺并使用其.then 方法：

控制器

app.controller("loginCtrl", function($scope, UserService){
    $scope.name = "TestName";

    $scope.check = function(user){

        //UserService.createUser(user, function(response){
        //USE .then method
        return UserService.createUser(user).then(function(data) {
            $scope.userinfo = data;
            console.log("FROM Ctrlr: " + data);
            return data;
        }).catch(function(errorResponse) {
            console.log(errorResponse.status);
            throw errorResponse;
        });
    }

});

服务

    function createUser(user){
        var promise = $http.post("/register", user).then(function(response){
            var data = response.data;
            console.log("FROM Srvc:" +data);
            //RETURN data to chain
            return data;
        });
        //RETURN promise
        return promise;
    }

不要将基于 Promise 的 API 转换为回调类型的 API。它被认为是一种反模式。

见Why are Callbacks from Promise .then Methods an Anti-Pattern.

【讨论】：

【解决方案2】：

你需要再添加1个参数，回调并将响应返回给回调函数

 function createUser(user, callback){
        $http.post("/register", user).then(function(response){

        console.log("FROM Srvc:" +response);

         callback(response);  // return the response in the callback function
        });
 }

【讨论】：

为什么我的回答被否决了。嘿，downvoter，展示自己
不要将基于 promise 的 API 转换为回调类型的 API。它被认为是一种反模式。见Why are Callbacks from Promise .then Methods an Anti-Pattern.

【解决方案3】：

为了在您的控制器中从工厂获得响应，请更改您工厂中的 createUser 函数，如下所示：

function createUser(user){
            //notice the return here!!!
            return $http.post("/register", user).then(function(response){

            console.log("FROM Srvc:" +response);
            return response.data; //notice the return here too!!!
            });
        }

您需要在函数内部返回 promise，并在 then 内部返回结果，以便从调用函数的任何位置访问它。

【讨论】：