AngularJS工厂中$http调用返回undefined或$$state对象问题排查

你遇到的问题看起来有点矛盾——factory里的then回调能正常打印API返回的数据，但控制器里拿到的结果却是undefined。我帮你梳理下可能的问题点和修复方案：

1. 规范你的Service/Factory写法 #

你现在用app.service但采用了Factory的写法（直接返回一个对象），虽然AngularJS允许这样做，但这不是Service的标准用法，容易造成混淆。更合适的做法是：

方案A：改用app.factory（推荐，因为你的写法更符合Factory模式） #

app.factory('dataService', ['$http', function($http) { 
  return { 
    quizQuestions: function() { 
      return $http.get("http://localhost:59143/api/Questions") 
        .then(function(response) { 
          console.log(response); 
          console.log(response.data); 
          console.log(response.data[0]); 
          // 返回response.data而非整个response对象，更贴合业务数据需求
          return response.data; 
        }) 
    } 
  } 
}])

方案B：调整为标准的Service写法 #

如果坚持用app.service，应该把方法挂载到this上，而非直接返回对象：

app.service('dataService', ['$http', function($http) { 
  this.quizQuestions = function() { 
    return $http.get("http://localhost:59143/api/Questions") 
      .then(function(response) { 
        console.log(response); 
        console.log(response.data); 
        console.log(response.data[0]); 
        return response.data; 
      }) 
  }; 
}])

2. 控制器添加错误捕获排查隐患 #

虽然你说factory里的日志能正常打印，但为了确保没有隐藏的错误，建议在控制器的then后添加catch回调：

app.controller('QuizController', ['$scope', 'dataService', function($scope, dataService) { 
  dataService.quizQuestions()
    .then(function(data) { 
      $scope.quizQuestions = data; 
      console.log('拿到的数据:', $scope.quizQuestions); 
    })
    .catch(function(error) {
      console.error('请求出错:', error);
    });
}])

3. 为什么之前的代码会出现undefined？ #

从你提供的代码来看，理论上控制器应该能拿到response对象，但可能存在以下隐性问题：

• 你返回的是整个response对象而非response.data，后续如果误访问非存在属性，可能误以为是数据undefined；
• 虽然factory里的console.log执行了，但Promise链式调用中可能出现未捕获的异常（比如后续数据处理环节出错），导致控制器的then回调未执行；
• Service写法不规范导致的实例化隐患（概率较低，但规范写法能避免这类问题）。

按照上面的方案修改后，应该能正常拿到API返回的数据了。

内容的提问来源于stack exchange，提问作者Z. Campbell