AngularJS中$http Get请求：服务无法向控制器返回数据问题

我太懂这种“服务里明明能打出数据，控制器却死活拿不到”的憋屈感了！这种情况90%都是异步操作没处理到位，或者数据传递的方式踩了AngularJS的坑，咱们结合常见场景和正确写法来捋明白：

最常见的坑：异步操作直接return（白忙活） #

很多人会在服务里写$http请求，然后在success回调里直接return数据——但这根本没用！因为$http是异步的，getData方法会先于请求完成就返回，控制器拿到的要么是undefined，要么是没resolved的Promise。

错误示例（别再这么写了！）

// 错误的Service写法
app.service('testService', function($http) {
  this.getData = function() {
    $http.get('/api/data').success(function(response) {
      console.log(response); // 这里能打印，但控制器拿不到
      return response; // 这是success回调的返回值，不是getData的返回值！
    });
  };
});

正确写法1：用Promise传递数据（推荐） #

AngularJS的$http本身就返回Promise，直接把这个Promise返回给控制器，然后在控制器里用.then()接收数据：

服务代码

app.service('testService', function($http) {
  this.getData = function() {
    // 直接返回$http的Promise，在then里把数据抛给控制器
    return $http.get('/api/data').then(function(response) {
      console.log('服务内数据：', response.data);
      return response.data; // 这里的返回值会传给控制器的then
    });
  };
});

控制器代码

app.controller('TestController', function(testService) {
  var vm = this; // 用vm避免this上下文混乱
  // 调用服务，通过then接收异步返回的数据
  testService.getData().then(function(data) {
    vm.data = data;
    console.log('控制器拿到的数据：', vm.data);
  }).catch(function(err) {
    console.error('请求出错：', err); // 别忘了捕获错误！
  });
});

正确写法2：用回调函数传递数据 #

如果你习惯用回调，一定要确保在异步操作完成后再调用回调，而不是提前执行：

服务代码

app.service('testService', function($http) {
  this.getData = function(callback) {
    $http.get('/api/data').success(function(response) {
      console.log('服务内数据：', response.data);
      callback(response.data); // 异步完成后才调用回调传数据
    }).error(function(err) {
      callback(null, err); // 错误情况也要通知控制器
    });
  };
});

控制器代码

app.controller('TestController', function(testService) {
  var vm = this;
  testService.getData(function(data, err) {
    if (err) {
      console.error('请求出错：', err);
      return;
    }
    vm.data = data;
    console.log('控制器拿到的数据：', vm.data);
  });
});

关于Service和Factory的区别（你可能没写对） #

虽然你试过切换，但要注意两者的写法差异：

• Service是构造函数，用this挂载方法；
• Factory是返回对象，直接把方法放到返回的对象里。

正确的Factory写法

app.factory('testService', function($http) {
  return {
    getData: function() {
      return $http.get('/api/data').then(function(res) {
        return res.data;
      });
    }
  };
});

最后检查几个小细节 #

1. 依赖注入有没有错：控制器里有没有正确注入testService？如果开启了ng-strict-di，要确保用数组显式注入：

   app.controller('TestController', ['testService', function(testService) {
     // ... 代码 ...
   }]);
   

2. 别同步拿异步数据：千万别在控制器里写var data = testService.getData();——异步操作不可能同步返回结果！
3. 拼写错误：检查服务名、方法名有没有写错（比如把getData写成getdata）。

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