Angular应用API调用结果无法传递至控制器的问题排查

嘿，这个报错我太熟悉了——本质原因就是你的mainService.getCardByName方法没有返回一个可链式调用的Promise对象，控制器里试图用.then()处理它的返回值，自然就会抛出类型错误。

先搞懂为什么会报错 #

AngularJS里的$http请求本身返回的是Promise，但如果你的service方法里只是发起了请求，却没把这个Promise（或者处理后的Promise）返回出去，那控制器调用这个方法时得到的就是undefined，undefined当然没有.then()方法啦！

举个典型的错误写法（你的service大概率是这样）：

// ❌ 错误示例：没有返回Promise
app.service('mainService', function($http) {
  this.getCardByName = function(cardName) {
    $http.get('/api/cards?name=' + cardName)
      .then(function(response) {
        // 处理去重逻辑
        var uniqueCards = [...new Set(response.data)];
        // 这里只处理了数据，但完全没把结果通过Promise返回
      });
  };
});

修正service的正确姿势 #

你需要确保getCardByName方法返回一个Promise，下面两种方案都可以：

方案1：直接返回$http的Promise链（最常用）

这种方式最简单，直接把$http的请求结果返回，同时在.then()里处理去重，处理后的数据会自动传递到控制器的回调中：

// ✅ 正确写法：返回Promise链
app.service('mainService', function($http, $q) {
  this.getCardByName = function(cardName) {
    // 关键：一定要return这个$http请求的Promise
    return $http.get('/api/cards?name=' + cardName)
      .then(function(response) {
        // 处理去重逻辑
        var uniqueCards = [...new Set(response.data)];
        // 返回处理后的数据，这个值会被传到控制器的.then里
        return uniqueCards;
      })
      .catch(function(error) {
        // 可以在这里统一处理错误，或者抛给控制器处理
        console.error('获取卡牌失败:', error);
        return $q.reject(error);
      });
  };
});

方案2：手动创建Promise（适合复杂异步逻辑）

如果你的去重逻辑还涉及其他异步操作，或者需要手动控制Promise的状态，可以用AngularJS的$q服务来创建：

// ✅ 手动创建Promise的写法
app.service('mainService', function($http, $q) {
  this.getCardByName = function(cardName) {
    var deferred = $q.defer();
    
    $http.get('/api/cards?name=' + cardName)
      .then(function(response) {
        var uniqueCards = [...new Set(response.data)];
        // 把处理好的数据通过resolve传递出去
        deferred.resolve(uniqueCards);
      })
      .catch(function(error) {
        // 传递错误信息
        deferred.reject(error);
      });
    
    // 关键：返回deferred的Promise对象
    return deferred.promise;
  };
});

控制器端的调用验证 #

确保你的控制器调用逻辑没问题，比如：

app.controller('cardSearchController', function($scope, mainService) {
  // 假设这是搜索触发的方法
  $scope.searchCards = function(cardName) {
    mainService.getCardByName(cardName)
      .then(function(uniqueCards) {
        // 把去重后的卡牌赋值给视图绑定的变量
        $scope.displayedCards = uniqueCards;
      })
      .catch(function(error) {
        // 处理错误场景，比如给用户提示
        console.error('加载卡牌失败:', error);
        $scope.errorMessage = '获取卡牌信息失败，请稍后重试';
      });
  };
});

最后再检查两个细节 #

1. 确认service.js在cardSearchController.js之前引入到index.html里——AngularJS得先加载服务，控制器才能依赖它：

<!-- 先加载服务 -->
<script src="service.js"></script>
<!-- 再加载控制器 -->
<script src="cardSearchController.js"></script>

2. 检查服务名的拼写！比如控制器里依赖的是mainService，service里注册的名字是不是完全一致，大小写也不能错哦。

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