angularJS 中的 $http.get 出错 -- 成功不是函数

Question

出现此错误：

angular.min.js:122 TypeError: $http.get(...).success is not a function at getUserInfo (app.js:7) at new (app.js:12) at Object.invoke (angular.min.js:43) at Q.instance (angular.min.js:93) at p (angular.min.js:68) at g (angular.min.js:60) at g (angular.min.js:61) at g (angular.min.js:61) at angular.min.js:60 at angular.min.js:21

这是我的代码：

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

这里是 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>

Answer 1

我认为您在使用 angular 时需要使用 .then 而不是 .success。

文档中的示例

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

这里是 $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.
  });

最后您的代码可能如下所示

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

Answer 2

根据您当前的实施，您没有将参数（即 $scope 和 $http）从 ng-click="getUserInfo()" 传递到 getUserInfo，因此您收到了错误。

您不需要像 $scope 和 $http 那样将它们作为参数传递，因为它已经注入控制器并在 $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();
}]);

Answer 3

无需将 $http 作为函数参数传递，因为您已经将 $http 作为依赖项注入到控制器中。我对代码做了一些修改。请检查它是否适合您。

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

Answer 4

.success 和 .error 方法已弃用，已 removed from AngularJS 1.6。请改用标准 .then 方法。

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

Deprecation Notice

The $http legacy promise methods .success and .error have been deprecated and will be removed in v1.6.0. Use the standard .then method instead.

— AngularJS (v1.5) $http Service API Reference -- Deprecation Notice.

另见。

Answer 5

这有效

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

Answer 6

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

Answer 7

你不需要注入 $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;
    });
  }
});

Answer 8

function successCallback(response) {
return response
}
$http.get('url')
.then(successCallback)

Answer 9

根据Angular JS $http documentation, this system has been excludede from 1.4.3 + So, I have taken help from his 你可以这样试试

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

   },function (error){

   });
}

或

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

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

我更喜欢第二种，它对我来说更灵活。

angularJS 中的 $http.get 出错 -- 成功不是函数

Error with $http.get in angularJS -- Success not a Function

angularjs

angularjs-http

angularjs-1.6

Deprecation Notice