$ http in angularjs funktioniert nicht

Question

Ich habe ein Stück Code in angularjs. Wenn ich den Wert der HTTP-Antwort fest codiere, wird die Antwort angezeigt, wenn ich die http-Methode in angularjs verwende, die nicht angezeigt wird. Wann immer eine Anfrage an den Server gesendet wird, erhalte ich eine Fehlerfunktion. Ich weiß nicht, wo ich falsch liege. Hier ist der Code

(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() ist asynchron, so dass die .success() Rückruf wird erst aufgerufen werden, nachdem Ihre Funktion zurückgekehrt ist. Das bedeutet, loadAll() kann die Daten nicht zurückgeben. Versuchen Sie nicht, $scope.repos mit der lokalen Variablen repos zu verwechseln, da es sich um sehr unterschiedliche Dinge handelt.

Verwenden Sie die veraltete Methode .success() überhaupt nicht. Verwenden Sie .then(), da es ein Versprechen zurückgibt, das mit anderen Verwendungen von Winkeln kompatibel ist.

Verschieben Sie den Kartencode innerhalb der .then Rückruf und wenn Sie möchten, dass loadAll() alles zurückgeben, geben Sie das Versprechen zurück, dass zurückgibt. Auf diese Weise kann alles, was loadAll() aufruft, auf das Versprechen warten, um abzuschließen.

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; 
     }); 
} 

Jetzt haben Sie zwei Möglichkeiten, um die Daten zu erhalten: sie als repos Wert im Bereich angezeigt wird, sobald es abgerufen wurde. Wenn in einer Winkelvorlage verwendet, zeigt die Seite die neuen Daten an. Oder rufen Sie loadAll() und nutzen das Versprechen an die zurückgegebenen Daten zu erhalten:

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

Sie sollten auch prüfen, Code für den Fall, einschließlich wo $http.get() ausfällt. Übergeben Sie es auch einen Fehlerrückruf.

Auch, wie @Rakeschand in den Kommentaren darauf hinweist, sollte der nächste Schritt darin bestehen, den gesamten Code aus dem Controller in einen Dienst zu verschieben. Sie rufen immer noch eine Funktion auf, die ein Versprechen zurückgibt, aber Code, um die empfangenen Daten in die Daten zu konvertieren, die Sie tatsächlich möchten, können aus dem Controller entfernt werden.