Возврат $ http-запроса в другой после действия

Question

Я не могу заставить это работать и действительно начинаю ко мне. Это очень просто.

<div ng-app="" ng-controller="customersController"> 
    <button ng-click="clickLoad()">click</button> 
    <ul> 
     <li ng-repeat="x in names"> 
      <button ng-click="showMore($index)">show more</button> 
      {{ x.Name + ', ' + x.Country }} 
     </li> 
    </ul> 
</div> 

<script> 
function customersController($scope, $http) { 

    $scope.clickLoad = function() { 
     $http.get("http://www.w3schools.com//website/Customers_JSON.php") 
      .success(function(response) { 
       $scope.names = response; 
      }); 
    } 


    $scope.showMore = function(n) { 

     $http.get("http://www.w3schools.com//website/Customers_JSON.php") 
      .success(function(data) { 
       $scope.next = data 
      }); 

     $scope.names.splice(n, 0, $scope.$next); 

    } 
} 
</script> 

Я просто хочу вернуть новый запрос $ http в первый массив (в определенный момент). но я не знаю, как просто читать данные со второго запроса в любой форме или форме. Я должен иметь синтаксис неправильно или что-то в этом роде.

Answer 1

Refactor сращивания быть внутри обратного вызова успеха

$scope.showMore = function(n) { 

    $http.get("http://www.w3schools.com//website/Customers_JSON.php") 
     .success(function(data) { 
      // log the data 
      $scope.next = data; 
      console.log('data that comes back', data); // what comes back in data? 

      // try splice 
      $scope.names.splice(n, 0, $scope.$next); 
      console.log('after splice', $scope.names); 

      // try concat instead? 
      $scope.names.concat(data); 
      console.log('after concat', $scope.names); 
     }); 
} 

Вы можете думать об этом, как, как тайм-аутов, даже если вы объявите .splice после .success, он все равно будет закончить текущую функцию, а затем запустить успех даже если ваше время ответа составляет 0 мс, именно так работают очереди событий.

Смысл, .success работает после .splice, как у вас есть, и, следовательно, он должен находиться внутри функции обратного вызова успеха.

Кроме того, изменить ваш ng-repeat="x in names" к

ng-repeat="x in names track by $index" 

Там может быть перерыв в коде из-за дублей.

Update

С точки зрения «возвращения» что-то, то функция возвращает вас есть обещание, так что вам нужно будет получить доступ к нему, как и любой асинхронной задачи, с обратного вызова или обещание цепи.

$scope.showMore = function(n) { 
    var deferred = $q.defer(); // a deferred object; a unit of work to be done which has callbacks 
    $http.get("w3schools.com//website/Customers_JSON.php").then(function(successResponse) { // you can use .then instead of success 
     var data = successResponse.data; 
     console.log('success response data:', data); 
     $scope.names.splice(n + 1, 0, { 
      Name: 'John', 
      Country: 'Doe' 
     }); 
     deferred.resolve(successResponse); // mark as successful, pass in response as part of resolution. You can replace successResponse with any other data you want, like $scope.names and it will be available in the next step of the promise chain 
    }, function(errorResponse){ 
     var data = errorResponse.data; 
     console.log('error response data:', data); 
     deferred.reject(errorResponse); // mark as failed, pass in error response which came from server 
    }); 
    return deferred.promise; // return a promise 
} 

Использование:

// this function will do all processing above and then continue with this one below. 
$scope.showMore().then(function(successfulResponse){ // show more will return a promise 
    console.log('successfulResponse', successfulResponse); 
}, function(errorResp){ 
    console.log('errorResp', errorResp); 
});