Angularjs ui-router解决方案不会等待所有承诺

Z时代
2024-01-10
分类：问答

目前，我在等待我的承诺传递给解决方案时遇到问题。据我所知，这是因为它是一个异步调用，所以决心不会等待所有的承诺，只是传递我的部分数据来解决。Angularjs ui-router解决方案不会等待所有承诺

我试过寻找很多的论坛，但我似乎无法得到它的工作。

所以这里是我的主页。

angular.module('app') 
    .component('home', { 
     templateUrl: 'Content/app/components/home.html', 
     bindings: {}, 
     controller: ['$http', '$state', 'test', 
      function ($http, $state, test) { 
       var vm = this; 
       vm.userName; 
       vm.searchReddit = function() { 
        $http.get('https://www.reddit.com/user/' + vm.userName + '/about.json') 
         .then(function (response) { 
          vm.accountData = response.data.data; 
          vm.accountData.total_karma = vm.accountData.comment_karma + vm.accountData.link_karma; 
          $state.go('redditAnalyzer', { name: vm.userName }); 
         }); 
       } 
      } 
     ] 
    });

一旦我输入我的用户名，它会改变状态。在我app.js我有

angular.module('app', ['ui.router', 'chart.js']) 
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/'); 
     $stateProvider 
      .state('redditAnalyzer', { 
       url: '/analyze/:name', 
       component: 'redditAnalyzer', 
       resolve: { 
        resolve: 
        ['test', '$stateParams', function (test, $stateParams) { 
         var data = test.getAnalysisData($stateParams.name); 
         return data; 
        } 
        ] 
       } 
      }) 
      .state('home', { 
       url: '/', 
       component: 'home' 
      }); 
    }]);

我打电话的功能test.getAnalysisData来获取数据。

，在我test.js我有

angular.module('app') 
    .factory('test', ['$http', '$state', '$q', function ($http, $state, $q) { 
     var vm = this; 
     vm.accountData = {}; 
     vm.after = ''; 
     vm.bestComment = {}; 
     vm.bestComment.karma = 0; 
     vm.userName; 
     vm.bestComment.date = ''; 
     vm.subreddit = {}; 
     vm.myChart; 
     vm.getAnalysisData = function (redditUser) { 
      vm.userName = redditUser; 
      vm.resetData(redditUser); 
      vm.getAccountInfo(redditUser); 
      vm.getAllComments(redditUser); 
      return { 
       accountData: vm.accountData, 
       bestComment: vm.bestComment, 
       userName: vm.userName, 
       subreddit: vm.subreddit, 
       myChart: vm.myChart 
      }; 
     } 
     vm.resetData = function (user) { 
      vm.accountData = {}; 
      vm.after = ''; 
      vm.bestComment = {}; 
      vm.bestComment.karma = -(Math.pow(2, 53) - 1); 
      vm.userName = user; 
      vm.date = ''; 
      vm.subreddit = []; 
      vm.topThreeSub = []; 
     } 
     vm.getAccountInfo = function (user) { 
      $http.get('https://www.reddit.com/user/' + user + '/about.json') 
       .then(function (response) { 
        vm.accountData = response.data.data; 
        vm.accountData.total_karma = vm.accountData.comment_karma + vm.accountData.link_karma; 
        console.log("I got the account info!"); 
       }); 
     } 
     vm.getAllComments = function (user) { 
      $http.get('https://www.reddit.com/user/' + user + '/comments.json' + vm.after) 
       .then(
       function (response) { 
        console.log("I got the comment info!"); 
        tempResponse = response; 
        var data = response.data.data 
        vm.after = '?after=' + data.after; 
        for (i = 0; i < data.children.length; i++) { 
         if (vm.bestComment.karma < parseInt(data.children[i].data.score)) { 
          vm.bestComment.karma = parseInt(data.children[i].data.score); 
          vm.bestComment.comment = data.children[i].data.body; 
          vm.bestComment.date = (new Date(data.children[i].data.created * 1000)).toString(); 
         } 
         var tempSub = data.children[i].data.subreddit; 
         if (vm.subreddit[tempSub] === undefined) { 
          vm.subreddit[tempSub] = 1; 
         } 
         else { 
          vm.subreddit[tempSub]++; 
         } 
        } 
        if (response.data.data.after != null) { 
         vm.getAllComments(user); 
        } 
       }, function (error) { 
        console.log(error); 
        throw error; 
       }) 
       .catch(function (error) { }); 
     } 
     return { 
      resolve: vm.resolve, 
      hello: vm.hello, 
      getAnalysisData: vm.getAnalysisData 
     } 
    }]);

我递归调用函数vm.getAllComments，因为它的工作原理是vm.getAllComments将获得该帐户的第25层的意见，然后再从部分来自回复的信息，我可以在账户中获得接下来的25条评论。

终于，在我的redditanalyzer文件，我有

angular.module('app') 
    .component('redditAnalyzer', { 
     templateUrl: 'Content/app/components/redditAnalyzer.html', 
     bindings: { 
      resolve: '<' 
     }, 
     controller: ['$http', 'test', 
      function ($http, test) { 
       var vm = this; 
       vm.accountData = {}; 
       vm.bestComment = {}; 
       vm.bestComment.karma = 0; 
       vm.userName; 
       vm.bestComment.date = ''; 
       vm.subreddit = {}; 
       vm.myChart; 
       vm.$onInit = function() { 
        console.log("this is the resolve", vm.resolve); 
        //vm.accountData = resolve.accountData; 
        //vm.bestComment = resolve.bestComment; 
        //vm.myChart = resolve.myChart; 
        //vm.subreddit = resolve.subreddit; 
        //vm.userName = resolve.userName; 
       } 
      }] 
    });

而且你可以看到在我的控制台中的问题。

this is the resolve {accountData: {…}, bestComment: {…}, userName: "spez", subreddit: Array(0), myChart: undefined}accountData: {}bestComment: {karma: 22200, comment: "Reddit search might work by then.", date: "Thu Oct 27 2016 01:07:22 GMT-0400 (Eastern Daylight Time)"}myChart: undefinedsubreddit: [blog: 10, announcements: 475, modnews: 34, programming: 32, ModSupport: 20, …]userName: "spez"__proto__: Object test.js:44 I got the account info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! test.js:51 I got the comment info! 7test.js:51 I got the comment info!

即使在承诺之前，它也会更改路线。我应该如何等待我的所有承诺？

回答：

解析器不等待承诺，因为代码没有向解析器返回承诺。

的getAllComments函数需要返回一个承诺：

vm.getAllComments = function (user) { 
     ̲r̲e̲t̲u̲r̲n̲ $http.get('https://www.reddit.com/user/' + user + '/comments.json' + vm.after) 
      .then(
      function (response) { 
       console.log("I got the comment info!"); 
       tempResponse = response; 
       var data = response.data.data 
       vm.after = '?after=' + data.after; 
       for (i = 0; i < data.children.length; i++) { 
        if (vm.bestComment.karma < parseInt(data.children[i].data.score)) { 
         vm.bestComment.karma = parseInt(data.children[i].data.score); 
         vm.bestComment.comment = data.children[i].data.body; 
         vm.bestComment.date = (new Date(data.children[i].data.created * 1000)).toString(); 
        } 
        var tempSub = data.children[i].data.subreddit; 
        if (vm.subreddit[tempSub] === undefined) { 
         vm.subreddit[tempSub] = 1; 
        } 
        else { 
         vm.subreddit[tempSub]++; 
        } 
       } 
       if (response.data.data.after != null) { 
        ̲r̲e̲t̲u̲r̲n̲ vm.getAllComments(user); 
       } else { 
        ̲r̲e̲t̲u̲r̲n̲ ̲v̲m̲.̲b̲e̲s̲t̲C̲o̲m̲m̲e̲n̲t̲;̲ 
       } 
      }, function (error) { 
       console.log(error); 
       throw error; 
      }) 
      ̶.̶c̶a̶t̶c̶h̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶e̶r̶r̶o̶r̶)̶ ̶{̶ ̶}̶)̶;̶ 
    }

使用$q.all创建等待多个承诺一个承诺：

vm.getAnalysisData = function (redditUser) { 
     vm.userName = redditUser; 
     vm.resetData(redditUser); 
     vm.getAccountInfo(redditUser); 
     ̲v̲a̲r̲ ̲a̲l̲l̲C̲o̲m̲m̲e̲n̲t̲s̲P̲r̲o̲m̲i̲s̲e̲ ̲=̲ vm.getAllComments(redditUser); 
     return $q.all({ 
      accountData: vm.accountData, 
      bestComment: vm.bestComment, 
      userName: vm.userName, 
      subreddit: vm.subreddit, 
      myChart: vm.myChart, 
      ̲a̲l̲l̲C̲o̲m̲m̲e̲n̲t̲s̲:̲ ̲a̲l̲l̲C̲o̲m̲m̲e̲n̲t̲s̲P̲r̲o̲m̲i̲s̲e̲ 
     }); 
    }

欲了解更多信息，请参阅

AngularJS $q Service API Reference - Chaining Promises

AngularJS $q.all Method API Reference

You're Missing the Point of Promises

回答：

我额外的，你使用的是什么版本的UI路由器的？最新'$ stateParams'已被弃用，并以$ transition $复发。你

而且不`吨需要使用这个

url: '/analyze/:name',

在UI的路由器的传统，在URL路径中找到一个参数是可选。如果在URL中找不到该参数，它将匹配空的字符串。

您可以替换为：

url: '/analyze/',

和

params: { 
    name: "" 
    }

您可以阅读迁移guid

以上是 Angularjs ui-router解决方案不会等待所有承诺的全部内容，来源链接： utcz.com/qa/258203.html

Angularjs ui-router解决方案不会等待所有承诺

回答：

回答：

其他人也看了：