AngularJS中ngResource的$promise.then()报错问题求助

这个问题我之前在项目里也碰到过，本质是对ngResource的返回值特性理解有偏差，或者服务定义存在小疏漏。咱们一步步来解决：

错误原因分析 #

你看到的Cannot read property 'then' of undefined，说明$scope.query.$promise是undefined。这通常有两种可能：

• 你的UserService定义不正确，导致query方法没有返回带有$promise属性的对象；
• 你调用query后立即赋值并访问$promise的方式，在某些场景下（比如框架内部初始化延迟）会出现$promise还未被附加到返回对象上的情况。

步骤1：检查并修正UserService的定义 #

首先确保你的资源服务是按照ngResource的规范定义的，正确的示例如下：

angular.module('yourAppName').factory('UserService', ['$resource', function($resource) {
  // 替换成你实际的接口地址
  return $resource('/api/users/:userId', { userId: '@id' }, {
    // query方法默认就是GET+isArray:true，显式声明更清晰
    query: { method: 'GET', isArray: true }
  });
}]);

重点要确认：

• 正确注入了$resource依赖；
• query方法的isArray设置为true（因为query通常用来获取列表数据，返回数组）。

步骤2：修正调用方式 #

原来的代码先把query()的返回值赋值给$scope.query再访问$promise，这种方式理论上可行，但不够可靠。推荐两种更稳妥的写法：

写法一：直接链式调用$promise #

直接在query()后链式调用$promise.then()，请求完成后再把数据赋值到$scope：

angular.module('yourAppName').controller('YourController', ['$scope', 'UserService', function($scope, UserService) {
  UserService.query().$promise
    .then(function(fetchedUsers) {
      $scope.query = fetchedUsers;
      console.log('获取到用户数据:', fetchedUsers);
    })
    .catch(function(error) {
      console.error('获取用户数据失败:', error);
    });
}]);

写法二：使用ngResource自带的回调函数 #

ngResource的方法支持直接传入success和error回调，这也是官方推荐的方式之一：

angular.module('yourAppName').controller('YourController', ['$scope', 'UserService', function($scope, UserService) {
  UserService.query(
    // success回调
    function(fetchedUsers) {
      $scope.query = fetchedUsers;
      console.log('获取到用户数据:', fetchedUsers);
    },
    // error回调
    function(error) {
      console.error('获取用户数据失败:', error);
    }
  );
}]);

为什么原来的写法会出问题？ #

ngResource的query()方法会立即返回一个空的数组对象，这个对象会在HTTP请求完成后被填充实际数据，同时框架会把$promise属性附加到这个数组上。但如果服务定义错误，或者在某些极端场景下（比如请求还没初始化完成就访问$promise），就会出现$promise未定义的情况。上面两种写法都避开了这个潜在问题。

内容的提问来源于stack exchange，提问作者Manoj