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

您无法设置$scope.totalItems，直到数据到达，这意味着您需要在响应数据中指定success的{{1}}回调中设置它。

$scope.clientes是一个ajax请求，ajax中的第一个A用于＆＃34;异步＆＃34;

请注意，$http和success已弃用，您应该使用文档中的建议来使用承诺回调error和then()

Answer 2

我建议您尽可能多地在工厂中提供与请求相关的逻辑，包括处理响应：

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

另外请不要忘记get请求返回响应对象，并且您可能需要在响应中返回data属性（如果这是您需要的）。你也应该赞成promises上的.then（）方法。

在es6中，我们可以非常精确地捕捉到这样的错误：

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

在你的控制器中，我们可以这样做：

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

在es6中：

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

编辑：对OP中更新代码的响应 不幸的是，任何与客户有关的事情都应该在请求的回调中完成：

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

原因是，引用clientes的控制器中的所有代码都引用了原始的空数组而不是请求中的数据。这是因为它不在电话中。因此，在发出请求时，该代码将运行。如果将它放在回调中，它一旦到达就可以访问返回的数据。

如何做$ http.get等待响应

2 个答案: