web-dev-qa-db-ja.com

angularJSの$ http.getのエラー-関数ではなく成功

このエラーの取得：

angular.min.js：122 TypeError：$ http.get（...）。successは、Object.invoke（angular.min）のnew（app.js：12）のgetUserInfo（app.js：7）の関数ではありません.js：43）Q.instance（angular.min.js：93）でp（angular.min.js：68）でg（angular.min.js：60）でg（angular.min.js：61） ）g（angular.min.js：61）で、angle.min.js：60で、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>
angularjsangularjs-httpangularjs-1.6
26
Manzur Khan

.successおよび.errorメソッドは非推奨であり、 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);
});

廃止のお知らせ

$httpレガシー約束メソッド.successおよび.errorは非推奨になり、v1.6.0で削除されます。代わりに標準の.thenメソッドを使用してください。

— AngularJS（v1.5）$ httpサービスAPIリファレンス-廃止のお知らせ 。

SO：angular $ httpの成功/エラーメソッドが非推奨になった理由 も参照してください。

59
georgeawg

angular を使用する場合、.successではなく.thenを使用する必要があると思います。

ドキュメントの例

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

これは動作します

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

現在の実装では、ng-click="getUserInfo()"からgetUserInfoに引数（つまり、$scopeおよび$http）を渡していないため、エラーが発生しています。

これらを$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();
}]);
2
Satpal

$ 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

コントローラーへの依存関係として既に$ 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();
}]);
0
Nitheesh

Angular JS $httpdocumentation によると、このシステムは1.4.3 +から除外されているので、彼の post =そして、あなたはこの方法を試すことができます

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

   },function (error){

   });
}

OR

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

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

私にとっては、より柔軟な2番目の方が好きです。

0
gdmanandamohon