angularJS中的$http.get错误——成功不是函数[重复]

Posted

技术标签:

【中文标题】angularJS中的$http.get错误——成功不是函数[重复]【英文标题】:Error with $http.get in angularJS -- Success not a Function [duplicate] 【发布时间】:2017-05-02 05:13:37 【问题描述】:

得到这个错误:

angular.min.js:122 TypeError: $http.get(...).success 不是函数 在 getUserInfo (app.js:7) 在新的 (app.js:12) 在 Object.invoke (angular.min.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) 在 angular.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>

【问题讨论】:

哪个版本的角度? successerror 回调已被弃用,因为(我认为)角度 1.5 .success.error 方法已被弃用,已被 removed from AngularJS 1.6 取代。 【参考方案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);
        );
;

【讨论】:

他们需要使用.then(),尽管.success()已被弃用。您可能应该举一个例子,尽管它使用 $http.then() 而不是通用的承诺示例。【参考方案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();
]);

【讨论】:

不要,同样的错误,虽然我可以使用 .then 而不是 .success 方法来做到这一点 借用你的代码给他一个使用 .then 的例子 @devzero,没关系 @ManzurKhanSarguroh,您使用的是哪个版本的angular @Satpal 1.6 版【参考方案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();
]);

【讨论】:

【参考方案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);
);

弃用通知

$http 旧承诺方法 .success.error 已被弃用,并将在 v1.6.0 中删除。请改用标准的.then 方法。

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

另见SO: Why are angular $http success/error methods deprecated?。

【讨论】:

【参考方案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.
  );

【讨论】:

【参考方案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);
);

【讨论】:

请正确格式化您的代码 .error 方法已弃用。而是使用.catch【参考方案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;
    );
  
);

【讨论】:

【参考方案8】:
function successCallback(response) 
return response

$http.get('url')
.then(successCallback)

【讨论】:

感谢您提供此代码 sn-p,它可能会提供一些即时帮助。一个正确的解释would greatly improve 其教育价值通过展示为什么这是一个很好的解决问题的方法,并将使它对未来有类似但不相同的问题的读者更有用。请edit您的答案添加解释,并说明适用的限制和假设。【参考方案9】:

根据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)

   );

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

function successCallback(response)
    //success code

function errorCallback(error)
    //error code

我更喜欢第二个,它对我来说更灵活。

【讨论】:

以上是关于angularJS中的$http.get错误——成功不是函数[重复]的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS http 中的错误处理然后构造

AngularJS - $http get 返回状态为 0 的错误?

AngularJS中的404错误

$ http get不会在AngularJS中抛出成功或错误[重复]

如何使用 AngularJS 中的一些数据进行 $http GET?

angularjs中的$ http.get读取txt文件但无法读取json文件