web-dev-qa-db-fra.com

Erreur avec $ http.get dans angularJS - Le succès n'est pas une fonction

Obtenir cette erreur: 

angular.min.js: 122 TypeError: $ http.get (...). success n'est pas une fonction à getUserInfo (app.js: 7) at new (app.js: 12) sur Object.invoke (angular.min.js: 43) at Q.instance (angular.min.js: 93) en p (angular.min.js: 68) en g (angular.min.js: 60) en g (angular.min.js: 61) en g (angular.min.js: 61) à angular.min.js: 60 à angular.min.js: 21

Voici mon code:

var gitHub = angular.module('gitHub', []);

gitHub.controller('mainController', ['$scope', '$http', function($scope, $http) {

    var $scope.user = '';
    function getUserInfo($scope, $http){ 
        $http.get('https://api.github.com/users')
            .success(function (result) {
                $scope.user = result;
                console.log(result);
            });
    };
    getUserInfo($scope, $http);
}]);

et voici le html

<!DOCTYPE html>
<html ng-app="gitHub">
<head>
    <title>Github Users Directory</title>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div ng-controller="mainController">
        <div>
            <h1>GitHub Users</h1>
            Who do you want to search for?<input type="text" name="FindHim" ng-model="queryName" />
            <button ng-click="getUserInfo()">Search</button>
        </div>
        <div>
            {{ user }}
        </div>

    </div>
</body>
</html>
angularjsangularjs-httpangularjs-1.6
26
Manzur Khan

Les méthodes .success et .error sont obsolètes et ont été supprimées de AngularJS 1.6 . Utilisez plutôt la méthode .then standard.

$http.get('https://api.github.com/users')
  .then(function (response) {

    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;

    $scope.user = data;
    console.log(data);
});

Avis de dépréciation

Les anciennes méthodes de promesse $http.success et .error sont obsolètes et seront supprimées à partir de la version 1.6.0. Utilisez plutôt la méthode .then standard.

- AngularJS (v1.5) Référence de l'API de service $ http - Avis de dépréciation .

Voir aussi SO: Pourquoi les méthodes de réussite/erreur $ http angulaires sont-elles déconseillées? .

59
georgeawg

je pense que vous devez utiliser .then et non .success lorsque vous utilisez angular . 

Exemple de la doc

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
}, function(update) {
  alert('Got notification: ' + update);
});

Voici l'exemple de la façon dont $ Http l'utilise:

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Et finalement, votre code pourrait ressembler à ceci 

$scope.getUserInfo = function () {
    $http.get('https://api.github.com/users')
        .then(function (result) {
            $scope.user = result;
            console.log(result);
        }, function(result) {
            //some error
            console.log(result);
        });
};
15
devzero

cela marche

https://docs.angularjs.org/api/ng/service/$http 

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });
4
Brian Sanchez

Conformément à votre implémentation actuelle, vous ne transmettez pas les arguments (c.-à-d. $scope et $http) à getUserInfo à partir de ng-click="getUserInfo()" et vous obtenez donc l’erreur.

Vous n'avez pas besoin de les transmettre en tant qu'arguments en tant que $scope et $http en tant que contrôleur déjà injecté et définir la fonction dans $scope. 

gitHub.controller('mainController', ['$scope', '$http', function($scope, $http) {

    $scope.user = '';
    //Redefined function, without arguments
    $scope.getUserInfo = function (){ 
        $http.get('https://api.github.com/users')
            .success(function (result) {
                $scope.user = result;
                console.log(result);
            });
    };
    $scope.getUserInfo();
}]);
2
Satpal

Vous n'avez pas besoin d'injecter $ scope, $ http ..

app.controller('MainController', function($scope, $http) { 
  $scope.fetchData = function(_city){
    $http.get("../api/AllPlaces?filter[where][placeCity]="+ _city)
    .then(function(response) {
      $scope.Data = response.data;
    });
  }
});
1
Sibghat Ullah
$http({
    method: 'GET',
    url: '....',
    headers: {
        'Authorization': 'Bearer ' + localStorage["token"]
    }
})
.then(function (data, status, headers, config) {
     alert(JSON.stringify(data) + "Status" + status);
})
.error(function (data, status, headers, config) {
     alert(JSON.stringify(data) + "Status" + status);
});
0
Pawan Kumar

Pas besoin de passer $ http en tant que paramètre de fonction, car vous avez déjà injecté $ http en tant que dépendance à votre contrôleur. J'ai apporté quelques modifications au code. S'il vous plaît vérifier que cela fonctionnera bien pour vous.

var gitHub = angular.module('gitHub', []);

gitHub.controller('mainController', ['$scope', '$http', function ($scope, $http) {

    $scope.user = '';

    $scope.getUserInfo = function() {
        $http.get('https://api.github.com/users')
            .success(function (result) {
                $scope.user = result;
                console.log(result);
            });
    };
    $scope.getUserInfo();
}]);
0
Nitheesh

Selon Angular JS $httpdocumentation , ce système a été exclu de 1.4.3 +. J'ai donc pris l’aide de son post et vous pouvez essayer de cette façon

app.controller('MainCtrl', function ($scope, $http){
   $http({
      method: 'GET',
      url: 'api/url-api'
   }).then(function (success){

   },function (error){

   });
}

OU 

$http.get('api/url-api').then(successCallback, errorCallback);

function successCallback(response){
    //success code
}
function errorCallback(error){
    //error code
}

Je préfère le second qui était plus flexible pour moi. 

0
gdmanandamohon