【问题标题】:AngularJS - Script stops running at factory function with promise returnAngularJS - 脚本停止在工厂函数运行并返回承诺
【发布时间】:2018-07-12 19:39:42
【问题描述】:

我一直在学习/从事一个新手项目,该项目基本上是一个简单的任务管理器(类似于那些待办事项列表项目)。我为这个项目设计了一个用户登录页面,它是这样工作的。

所以我有两个函数siteLogin() 用于登录并在其中我想在用户登录后使用第二个函数showTasks(),它返回它从API 获得的用户任务(我知道的承诺) .

所以首先我需要从 showTasks() 函数内的 $http 返回一个值,但我最终返回了类似 $$state 的东西,所以我在这个网站上搜索并找到了几个解决方案到目前为止,我了解到 $http 不返回值,而是返回 promises。因此,经过几次尝试和失败后,我的代码现在运行到 showTasks() 并停在那里。

现在这是我的代码。

工厂

app.factory('userTaskList', function ($http) {

    return {
        showTasks: function (userName) {
            var tasks = { K_ADI: userName }; //UserName of the per 
            var $promise = $http({
                method: 'POST',
                url: 'http://localhost:5169/api/Isler/' + userName + '/IstenilenKayitCek',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: tasks
            });
            $promise.then(function successCallback(response) {
                var data = response.data;
                console.log("Factory data:", response);
                return success(data);

            }, function errorCallback(response) {     
                error("Error");
            });
        }
    }
});

还有我的控制器:

 app.controller('myCtrl', ['$scope', '$http', function ($scope, $http,userTaskList ) {

 $scope.siteLogin = function () {
    var loginMember = {
        K_ADI: $scope.panel.loginUserName,  
        PAROLA: $scope.panel.loginPassword  // HTML input 
    };
    console.log(loginMember);
    $http({
        method: 'POST',
        url: 'http://localhost:5169/api/Kullanicilar/KullaniciDogrula',
        headers: {
            'Content-Type': 'application/json'
        },
        data: loginMember
    }).then(function successCallback(response) {
        console.log("Message sent", response);
        $scope.data = response.data.error.data;
        if ($scope.data === true) {

            console.log("User exists in database");

            //RUNS UNTIL HERE AND STOPS

            userTaskList.showTasks($scope.panel.loginUserName)
                .then(function (res) {
                    $scope.gorev = res;
                    console.log("Fonk ici : ", $scope.gorev);
                    console.log("222222", res);
                }, function (err) {
                    console.log(err);
                });
            console.log("outside func : ", $scope.gorev);     
        } 
    }, function errorCallback(response) {
        console.log("Error: ", response);
    });
}
}]);

这可能被视为重复,堆栈上有许多类似的问题,但我尝试了这些解决方案(稍后我将链接一些)仍然没有解决我的这个问题,而且其中一些还产生了类似这样的其他问题。我尝试使用$q,嵌套.then,最后在工厂中定义代码,然后在模块中调用它的实例等等。但还是不行。

注意:对不起,我的英语不好。

【问题讨论】:

  • 停止是什么意思?控制台中的任何错误?响应是什么样的?你有response.data.error.data,这会产生空指针异常吗?
  • @SumamaWaheed 完全没有错误。我在 consol 中看到的最后一件事是 "User exists in database,我看不到 consol 的其余日志。关于response.data.error.data 它是因为它的agroup 项目和我的朋友以一种蹩脚的方式编写API。所以我需要获得这样的数据。我在我没有在这里发布的其他功能中使用了它,所以我知道不是那样。

标签: javascript angularjs angular-promise


【解决方案1】:

showTasks函数有几个错误:

app.factory('userTaskList', function ($http) {

    return {
        showTasks: function (userName) {
            var tasks = { K_ADI: userName }; //UserName of the per 
            var $promise = $http({
                method: 'POST',
                url: 'http://localhost:5169/api/Isler/' + userName + '/IstenilenKayitCek',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: tasks
            });
            var derivedPromise = $promise.then(function successCallback(response) {
                var data = response.data;
                console.log("Factory data:", response);
                ̶r̶e̶t̶u̶r̶n̶ ̶s̶u̶c̶c̶e̶s̶s̶(̶d̶a̶t̶a̶)̶;̶
                //IMPORTANT
                return data;

            }, function errorCallback(response) {     
                ̶e̶r̶r̶o̶r̶(̶"̶E̶r̶r̶o̶r̶"̶)̶;̶
                console.log(response.status);
                //IMPORTANT
                throw response;
            });
            //IMPORTANT
            return derivedPromise;
        }
    }
});

所需数据需要返回到.then方法成功处理程序。

错误处理程序中的错误需要重新抛出。否则,被拒绝的承诺将被转换为成功,值为undefined。

最后派生的promise需要返回给showTasks函数。


更新

您认为我在 $scope.siteLogin 中正确调用了该函数吗?

依赖注入错误:

̶a̶p̶p̶.̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶(̶'̶m̶y̶C̶t̶r̶l̶'̶,̶ ̶[̶'̶$̶s̶c̶o̶p̶e̶'̶,̶ ̶'̶$̶h̶t̶t̶p̶'̶,̶ ̶
    function ($scope, $http,userTaskList ) {

应该是

app.controller('myCtrl', ['$scope', '$http', 'userTaskList', 
    function ($scope, $http,userTaskList ) {

或

app.controller('myCtrl', function ($scope, $http,userTaskList ) {

【讨论】:

  • 感谢您解决了我的问题!我选择您的回复作为答案,这有点偏离主题,但正如我在问题中提到的那样,尽管console.log("outside func : ", $scope.gorev); 仍将undefined 打印到控制台,但我仍然无法访问函数之外的数据。你能给我一些建议吗?
  • 这就是异步操作的工作方式。操作是非阻塞的,这意味着 JavaScript 引擎会立即执行下一行。 .then 块中的代码会一直保留到服务器收到结果为止。
  • 非阻塞操作是 functional programming 最强大的功能之一,也是新 JavaScript 程序员经常误解的功能。
猜你喜欢
  • 1970-01-01
  • 2014-09-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-30
  • 2017-11-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多