$ http.get待機応答の方法

Question

$ http.getに問題があります。私のservice.jsが私のMVCコントローラにアクセスするとき、$ http.getは応答を待つことはありません。 $ http.get MVC Controllerの応答を待つ方法はありますか？私のコード。

AngularJSのサービス：

angular.module("cadastroCliente").factory("clientesAPI", function($http) { 
var getClientes = function() { 
    return $http.get("http://localhost:39732/Cadastro/BuscarClientes/"); 
}; 

return { 
    getClientes: getClientes 
}; 
}); 

ControllerJS - 編集

angular.module("cadastroCliente").controller("cadastroClienteCtrl", function ($scope, $http, $q, $timeout, clientesAPI) { 
$scope.app = "Pesquisar Clientes"; 
$scope.clientes = []; 

var carregarClientes = function() { 
    clientesAPI.getClientes().success(function (data) { 
     $scope.clientes = data; 
    }).error(function (data, status) { 
     $scope.message = "Aconteceu um problema: " + data; 
    }); 
}; 

carregarClientes(); 

$scope.totalItems = $scope.clientes.length; 
$scope.itemsPerPage = 2; 
$scope.currentPage = 1; 

$scope.maxSize = 5; 
$scope.bigTotalItems = 175; 
$scope.bigCurrentPage = 1; 

$scope.pageCount = function() { 
    return Math.ceil($scope.clientes.length/$scope.itemsPerPage); 
}; 

$scope.$watch('currentPage + itemsPerPage', function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), 
     end = begin + $scope.itemsPerPage; 

    $scope.filteredClientes = $scope.clientes.slice(begin, end); 
}); 
}); 

ビュー：私はあなたの工場の要求に関係する限り多くのロジックを置くことを示唆している

<div class="table-responsive"> 
         <table class="table table-bordered table-hover table-striped" id="clienteId"> 
          <thead> 
           <tr> 
            <th class="col-lg-1">Código</th> 
            <th class="col-lg-7">Nome</th> 
            <th class="col-lg-3">Documento</th> 
            <th class="col-lg-1">Extrato</th> 
           </tr> 
          </thead> 
          <tbody ng-repeat="cliente in filteredClientes"> 
           <tr> 
            <td>{{cliente.ClienteId}}</td> 
            <td>{{cliente.Nome}}</td> 
            <td>{{cliente.CpfCnpj}}</td> 
            <td style="cursor: pointer"><i class="glyphicon glyphicon-search"></i></td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 

        <uib-pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination> 

Answer 1

可能な限り、応答の処理を含む：

var getClientes = function() { 
    return $http.get("http://localhost:39732/Cadastro/BuscarClientes/") 
    .then(function(res) { 
     return res.data 
    }); 
}; 

またget要求はレスポンスオブジェクトを返すことを忘れないでください、と（それはあなたが必要なものの場合）あなたは応答にデータプロパティを返すために必要がある場合がありますことを。 約束の上で.then（）メソッドも好むべきです。

我々は、これは非常に正確にし、また、どのようにのようなエラーがキャッチすることができますES6で

：

var carregarClientes =() => { 
     clientesAPI.getClientes() 
     .then(data => $scope.clientes = data); 
    }; 

：ES6で

var carregarClientes = function() { 
    clientesAPI.getClientes() 
    .then(function (data) { 
     $scope.clientes = data; 
    }) 
}; 

：我々はこれを行うことができ、あなたのコントローラで

var getClientes =() => { 
    return $http.get("http://localhost:39732/Cadastro/BuscarClientes/") 
    .then(({data}) => data) 
    .catch(({data}) => console.log(data.message)); 
}; 

を

編集：OPの更新コードへの応答残念ながら、clientesに関連するものは、要求のコールバックで実行する必要があります：

var carregarClientes = function() { 
    clientesAPI.getClientes() 
    .then(function (data) { 
     $scope.clientes = data; 
     //Assign any other variables 
    }) 
}; 

ている理由は、コントローラ参照clientes内のすべてのコードがデータ元空の配列を参照するとされていないということです要求。これは通話の外にあるためです。したがって、そのコードはで実行され、要求が行われています。コールバック内に配置すると、到着後に返されたデータにアクセスできます。

Answer 2

データが到着するまで$scope.totalItemsを設定することはできません。これは、$scope.clientesを応答データから割り当てたsuccessコールバックに設定する必要があることを意味します。

$httpは、AjaxリクエストであるとAjaxの最初のAはsuccessとerrorが廃止され、あなたが約束のコールバックthen()とcatch()を使用するために文書で勧告を使用する必要があることを「非同期」

注用です