Question

我在angularjs中有一段代码。如果我对http响应的值进行硬编码，那么当我在angularjs中使用http方法时，它会显示响应，而不显示它。每当请求发送到服务器时我都会获得错误功能。我不知道我哪里错了。这是代码

(function() {
  'use strict';
  angular
    .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('DemoCtrl', DemoCtrl);

  function DemoCtrl($timeout, $q, $log, $http, $scope) {
    var self = this;

    self.simulateQuery = false;
    self.isDisabled = false;

    self.repos = loadAll();
    self.querySearch = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;


    function querySearch(query) {
      var results = query ? self.repos.filter(createFilterFor(query)) : self.repos,
        deferred;
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function() {
          deferred.resolve(results);
        }, Math.random() * 1000, false);
        return deferred.promise;
      } else {
        return results;
      }
    }

    function searchTextChange(text) {
      $log.info('Text changed to ' + text);
    }

    function selectedItemChange(item) {
      $log.info('Item changed to ' + JSON.stringify(item));
    }


    function loadAll() {
      $log.info('test');

      var repos;
      repos = [];

      $http.get('http://melkban24.ir/city/json/2').success(function(response) {
        $scope.repos = response.data;

      });

      return repos.map(function(repo) {
        repo.value = repo.nameCity.toLowerCase();
        $log.info(repo.value);
        return repo;
      });
    }


    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);

      return function filterFn(item) {
        return (item.value.indexOf(lowercaseQuery) === 0);
      };

    }
  }
})();

Answer 1

$http.get()是异步的，因此在函数返回之后才会调用.success()回调。这意味着loadAll()无法返回数据。尽量不要将$scope.repos与局部变量repos混淆，因为它们是完全不同的东西。

根本不要使用弃用的.success()方法。使用.then()因为它将返回一个与angular中其他promises使用兼容的promise。

将地图代码移到.then回调中，如果希望loadAll()返回任何内容，则返回.then()返回的承诺。这样，任何调用loadAll()的东西都可以等待承诺完成。

function loadAll() {
     return $http.get('http://melkban24.ir/city/json/2').then(function(result){
        var repos = result.data.data;
        return repos.map(function (repo) {
           repo.value = repo.nameCity.toLowerCase();
           return repo;
        });
        $scope.repos = repos;
      });
}

现在您有两种获取数据的方法：一旦检索到它，它将在范围中显示为repos值。如果在角度模板中使用，页面将显示新数据。或者调用loadAll()并使用promise来获取返回的数据：

loadAll().then(function(repos) { ... });

您还应该考虑在$http.get()失败的情况下包含代码。也传递一个错误回调。

另外，正如@Rakeschand在评论中指出的那样，下一步应该是将所有$http代码移出控制器并进入服务。您仍然最终调用一个返回promise的函数，但是可以从控制器中删除将接收到的数据转换为您实际需要的数据的代码。

angularjs中的$ http不起作用

1 个答案: