1

我的问题是我不知道在哪里存储我需要在 http 请求的最终回调中访问的数据。在 jQuery 中，我只需执行以下操作

var token = $.get('/some-url', {}, someCallback);
token.oSomeObject = {data: 'some data'};

function someCallback( data, status, token ){
     token.oSomeObject.data // 'some data'
}

我使用令牌来存储请求特定的数据。

现在我发现在 Angular 中实现这一点的唯一方法是将数据存储在实际配置中：

var config = {
    url: '/some-url',
    method: 'GET',
    oSomeObject: { data: 'some data' }
};
$http(config).success(someCallback);

function someCallback( data, status, headers, config ){
     config.oSomeObject.data // 'some data'
}

一方面，这会阻止您使用速记调用（$http.get，$http.post），我还发现在将调用包装在特定服务模块中时，它是一种更加突兀的方式。

有没有其他方法可以做到这一点？

更新澄清

我可能只是在这里遗漏了一些简单的东西，不了解如何正确使用 Promise API，但为了确保我们在同一页面上，让我为您提供有关该问题的更多详细信息。

我有 2 个文件：1）Controller.js 2）AjaxServices.js（所有 ajax 调用都在这里定义为服务上的方法）。

AjaxServices.js 看起来像这样：

app.service('AjaxService', function( $http ){
     var self = this;

     this.createUser = function( oUser, fSuccessCallback ){
          return $http.put('/api/user', {oUser: oUser})
                       .success(fSuccessCallback);
     }
}

Controller.js 看起来像这样：

app.controller('MyController', function( $scope, AjaxServices ){
     $scope.saveUser = function( oUser ){
          var oPromise = AjaxServices.createUser( oUser, $scope.onUserSaved );

          oPromise.oUser = oUser // this is how I solve it in jQuery.ajax. The oPromise
                                 // is then sent as the token object in the onUserSaved
                                 // callback
     }
     $scope.onUserSaved = function( oStatus, status, headers, config ){
          oStatus.id // here is the id of the newly created user 
                     // which I want to now hook on to the oUser local object

     }
}

你将如何使用 Promise API 实现同样的目标？

4

1 回答 1

2

更新 2。关于更新代码的一些注意事项：您不必将回调传递给服务。这有效地扼杀了承诺的目的。让服务完成它的工作，而不会将其耦合到任何数据消费者。

app.service('AjaxService', function( $http ){
    var self = this;

    this.createUser = function( oUser ){
      return $http.put('/api/user', {oUser: oUser});
    }
}

现在服务不关心回调，这意味着您可以将多个回调附加到同一个服务 $http 调用。好的，让我们继续讨论服务数据消费者，在本例中它是控制器：

app.controller('MyController', function( $scope, AjaxServices ){
  $scope.saveUser = function( oUser ){
    var oOriginalPromise = AjaxServices.createUser( oUser );
    //lets modify the orginal promise to include our oUser
    var oModifiedPromise = oOriginalPromise.then(function(response) {
      response.oUser = oUser; 
      return response;
    });
    //in the code above we've chained original promise with .then,
    //modified response object and returned it for next promise to receive
    //at the same time, .then created a new promise

    //finally, after modifying our response, we can pass it to the desired callback. 
    //note, that .success and .error are $http specific promise methods, 
    //in all other cases use .then(fnSuccess, fnError)
    oModifiedPromise.then($scope.onUserSaved); 
  }
  $scope.onUserSaved = function(responseWithUser) {
    responseWithUser.oUser;
  }
}

当然，这仍然有点尴尬，因为 oUser 可以保存在控制器的作用域中，并且可以在 $scope.onUserSaved 中直接从那里访问。

更新。我会澄清我的答案。您可以在任何范围、任何地方链接 Promise。这是另一个由服务注入令牌的示例：

myModule.factory('Service', function($http) {
   return new function() {
      this.getData = function() {
        return $http.get(url).then(function(response) {
          response.token = myToken;
          return response;
        }
      }
   }
});

您甚至可以扩展或包装 $http 服务并在您的服务不知道的情况下在响应中注入令牌。

如果您对所有请求都执行此操作，那么 $httpInterceptor 可能更合适。在此处阅读有关拦截 http 调用的更多信息

原始答案

由于$http为您提供了 Promise，您可以将其链接到另一个 Promise，该 Promise 将注入令牌作为响应：

myModule.factory('Service', function($http) {
   return new function() {
      this.getData = function() {
        return $http.get(url);
      }
   }
});

//in controller or other service:
var myToken;
var tokenizedPromise = Service.getData().then(function(response) {
  response.token = myToken;
  return response;
});

承诺的最终消费者也可以访问令牌

于 2013-08-20T13:40:04.527 回答