Angularjs - 如何存储从$ http.get收到的响应?

时间:2016-05-20 06:37:58

标签: javascript angularjs

我有一个json文件。我想使用$http.get('items.json').success(function(response){ var data = response; //data can't be used outside this function }) 从该文件中获取数据并将其存储在变量中,以便稍后在控制器中使用它。像这样:

data

我想在函数外部使用$email = 'I@gmail.com'; $email = explode('@', $email); $firstPart = $email[0]; $lastPart = $email[1]; $first4 = substr($firstPart, 0, 4); $mid = preg_replace('/[^.@\-]/', 'x', substr($firstPart, 4)); $last = preg_replace('/[^.@\-]/', 'x', $lastPart); $converted = $first4.$mid.'@'.$last;

4 个答案:

答案 0 :(得分:3)

你可以用以下方式完成:

var data;
$http.get('items.json').success(function(response){
    data = response;    //data can't be used outside this function
})

此处数据现在可以与控制器的所有方法一起使用。

但我的建议是制作一个角度服务并在其中加入$ http代码。然后注入这项服务 在控制器内部并使用它。

以下是代码:

服务代码:

app.service('MyService', function($http) {
  this.getData = function(successHandler, failureHandler) {
    $http.get('items.json').then(function(response){
      successHandler(response);    //data can't be used outside this function
    }, function(response) {
      failureHandler(response);
    })

  }
}); 

控制器代码:

app.controller('MyCntrl', function($scope, MyService) {
  var data;

  function successHandler(res) {
    data = res;
  }

  function failureHandler(res) {
    data = res;
  }

  $scope.getData = function() {
    MyService.getData(successHandler, failureHandler);
  }

});

上述解决方案可帮助您分离与服务和控制器相关的问题并制作您的应用程序 更加模块化和可维护。

答案 1 :(得分:1)

您可以在该功能之外创建数据。喜欢

var data;
$http.get('items.json').success(function(response){
    data = response;    //data can't be used outside this function
});

但是这样,即使你从本地使用JSONP,除非get call给出响应,否则数据也将是未定义的。 这样做的理想方式是使用promises。如下

var callService = function(){
 return $http.get('items.json').success(function(response){
        return response; // Response variable will be input to promise
    });        
};
callService.then(function(data){
// this data variable will be equal to response.
});

进一步阅读 < Out > $ Q

答案 2 :(得分:0)

不要在内部调用中创建变量,在外部声明该变量,只为其赋值。

<%= Rouge::Themes::Github.render(:scope => '.highlight') %>

.highlight {
  background-color: #ffffff;
  padding: 25em;
}

.highlight .err {
    color: #ffffff;
    background-color: #ffffff;
}

答案 3 :(得分:0)

正如所有提到的那样在函数外创建变量。 但是使用THEN代替success,因为它已被删除

  

弃用通知

     

$ http遗留承诺方法成功与错误已被弃用。请改用标准方法。如果$ httpProvider.useLegacyPromiseExtensions设置为false,则这些方法将抛出$ http / legacy错误。

var data; $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // this callback will be called asynchronously // when the response is available console.log(reponse); // response contain status , data, headers, config... data = response.data ; }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. });