javascript - Javascript 中返回值，但结果是未定义的

Question

我是 Javascripts 新手，我正在尝试使用 Angular UI 路线，这是我的代码

myApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {     
    $stateProvider  
        .state('home', {
            url: '/test',
            templateUrl: '/custom.html'
        })
        .state('detail', {                
            url: '/{examID}',              
            views: {
            '': {
              templateUrl: '/templates/customize.html',
               controller: ['$scope', '$stateParams', 'utils',

                function ( $scope,$stateParams,utils) {
                  $scope.exam = utils.findById($stateParams.examID);
                  console.log('exam is ' + $scope.exam );
                }
                ]
        }            
            }
        }     )    

    }])

这是具有findbyID功能的服务

angular.module('service', [])
.factory('utils', function ( $http) {
  return {
    findById: function findById(id) {
       $http.get('/api/exams/' + id).success(function(response) {
            return response;
    })}
};});

我已经关注了这个主题，但 $scope.exam 仍未定义

How to return value from an asynchronous callback function?

PS。我尝试打印出响应，它是一个对象

谢谢

Answer 1

这是许多刚接触 JavaScript 的开发人员遇到困难的地方。

这里发生的事情是您将 utils.findById() 的返回值分配给 $scope.exam。问题是 utils.findById() 实际上没有返回任何内容。 (当 JavaScript 中的函数没有显式 return 语句时，返回值将隐式 未定义。)

您的服务应如下所示:

angular
  .module('service', [])
  .factory('utils', function ($http) {
    return {
      findById: function (id) {
        return $http.get('/api/exams/' + id);
      }
    };
  });

您可能注意到对 .success() 的调用也消失了!不用担心。它刚刚移动。

我们不想在 $http.get() 上调用 .success()，而是在 utils.findById() 上调用它。这样做将使您能够访问 Controller 中的 response 变量。因为您将有权访问 response 变量，所以您将能够将 response 分配给 $scope.exam，如下所示:

.state('detail', {
  url: '/{examID}',
  views: {
    '': {
      templateUrl: '/templates/customize.html',
      controller: ['$scope', '$stateParams', 'utils',
        function ($scope, $stateParams, utils) {
          utils.findById($stateParams.examID)
            .success(function (response) {
              $scope.exam = response;
            });
        }
      ]
    }
  }
});

希望这能解决问题。如果我有任何不清楚的地方，请告诉我，以便我更新此答案。