在AngularJS服务中使用$http回调

Using $http callback inside AngularJS service

本文关键字：http 回调 AngularJS 服务      更新时间：2023-09-26

我有一个简单的Angular服务，它使用$http来调用API。

app.service("MyService", function($http){
  this.api = function(obj){
    return $http.post("/some-route", obj).success(function(data){
      //process data in various ways here
      var returnObj = {
        complete: true,
        data: data
      };
      return returnObj;
    });
  }
});

在$http回调中，我在返回数据之前先处理数据。当我在控制器中调用此服务时，我想获得处理后的数据。

下面只给我未处理的数据：

MyService.api(someObj).success(function(data){
  console.log(data);
});

如何从回调中获取已处理的数据？

success函数不会创建新的promise，因此您的控制器成功回调将注册到与服务（原始promise）相同的promise。

相反，您可以使用then，因此它将创建一个新的promise，该promise将通过您的returnObj对象来解决：

// service
return $http.post("/some-route", obj).then(function(data){
// controller
myService.api().then(function(data) {

我已经在一个plunker中测试了你的代码，你猜怎么着？它对我有用。你能确认一下吗，或者给我发更多信息，如果我能帮忙，我很高兴。

Plunker

var app = angular.module('plunker', []);
app.service("MyService", function($http){
  this.api = function(obj){
    return $http.post("http://jsonplaceholder.typicode.com/posts", obj).success(function(data){
      //process data in various ways here
      console.log(data);
      var returnObj = {
        complete: true,
        data: data
      };
      return returnObj;
    });
  }
});
app.controller('MainCtrl', function($scope,MyService) {
  $scope.data = 'World';
  MyService.api({oi: true}).success(function(data){
    $scope.data = data
  });
});

更新：我误解了你的问题。您希望处理回调中的数据，以便在操作中对其进行操作。您的代码不起作用，因为success（）实际上返回了一个promise，但它不会更改它，而是返回原始的promise。要选择的是then（），它是可链接的，并返回promise的修改版本。我对plunker进行了更改，以反映我对场景的新看法。这是新代码。谢谢你抽出时间。

var app = angular.module('plunker', []);
app.service("MyService", function($http){
  this.api = function(obj){
    return $http.post("http://jsonplaceholder.typicode.com/posts", obj).then(function(data){
      //process data in various ways here
      console.log(data);
      var returnObj = {
        complete: true,
        data: data
      };
      return returnObj;
    });
  }
});
app.controller('MainCtrl', function($scope,MyService) {
  $scope.data = 'World';
  MyService.api({oi: true}).then(function(data){
    $scope.data = data
  });
});

新Plunker

相关文章：