AngularJS 1.6 版从 `.success` 方法更改为 `.then` 方法答案

【问题标题】：AngularJS version 1.6 change from `.success` method to `.then` methodAngularJS 1.6 版从 `.success` 方法更改为 `.then` 方法
【发布时间】：2017-03-20 04:06:37
【问题描述】：

实际上我正在关注一个春季教程..来到Angularjs，他正在使用.succes

var app=angular.module("MyApp",[]);
.controller("MyController",function($scope,$http){
    $scope.pageProduits=null;

    $http.get("http://localhost:8080/chercherProduits?mc")
    .success(function(data){
         $scope.pageProduits=data;
    })
    .error(function(err){
         console.log(err);
    });

});

现在我的问题是成功不起作用，经过搜索，我发现 .success 和 .error 方法已被弃用，并已从 AngularJS 1.6 中删除。我必须使用标准的 .then 方法。有人可以使用 then 方法将现有代码转换为代码吗？我试过了，但我失败了，谁能帮助不熟悉 javaScript 的 plz bcz？谢谢

【问题讨论】：

.then(response) => .catch(error) => .finally()

标签： angularjs angular-http angularjs-1.6

【解决方案1】：

之前

$http(...).success(function onSuccess(data, status, headers, config) {
  // Handle success
  //...
}).error(function onError(data, status, headers, config) {
  // Handle error
  //...
});

之后

$http(...).then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    //...
  }).catch(function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    //...
  });

欲了解更多信息，请参阅AngularJS Developer Guide - Migrating from V1.5 to V1.6

另请参阅，Why are angular $http success/error methods deprecated? Removed from v1.6?

【讨论】：

【解决方案2】：

像这样使用then 来捕捉响应。确保使用response.data，因为响应数据属于data 属性

$http.get("http://localhost:8080/chercherProduits?mc")
.then(function(response){
     $scope.pageProduits=response.data;
},function(response){
     console.log(response.data);
})

使用ng repeat逐行显示数据

<body ng-app="MyApp" ng-controller="MyController">
   <div class="container">
      <table class="table table-striped">
         <thead>
            <tr >
               <th>ID</th>
               <th>Désignation</th>
               <th>Prix</th>
               <th>Quantité</‌th> 
            </tr>
         </thead>
         <tbody>
            <tr ng-repeat="p in pageProduits">
               <td>{{p.id}}</td>
               <td>{{p.designation}}</td>
               <td>{{p.prix}}</td>
               <td>{{p.quantite}}</td>
            </tr>
         </tbody>
      </table>
   </div>
   <script type="text/javascript" src="node_modules/angular/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> 
</body>

【讨论】：

谢谢你 sachila var app=angular.module("MyApp",[]); app.controller("MyController",function($scope,$http){ $scope.pageProduits=null; $http.get("http://localhost:8080/chercherProduits?mc") .then(function(resonse){ $scope.pageProduits=resonse.data; },function(resonse){ console.log(resonse.data); }) });
.......
td>

ID Désignation Prix Quantité

{{p.id}} {{p.designation}} {{p.prix}} {{p.quantite}}

ID	Désignation	Prix	Quantité
{{p.id}}	{{p.designation}}	{{p.prix}}	{{p.quantite}}

【解决方案3】：

AngularJS $http 服务向服务器发出请求，并返回一个response。使用then 而不是success，如下所示：

var app=angular.module("MyApp",[]);
app.controller("MyController",function($scope,$http){
$scope.pageProduits=null;

$http.get("http://localhost:8080/chercherProduits?mc")
.then(function(data){  // function that execute on ajax success
     $scope.pageProduits=data.data;
}, function error(function(err){  //function that execute on ajax error
     console.log(err.statusText);
});
});

【讨论】：

【解决方案4】：

根据 Angular Js 官方文档。 Success 和 error 方法不再可用。这些方法已贬值，而是建议使用标准的.then 方法。 Succces 方法仅从响应中返回 data，但在 .then 方法中，返回完整的 response 对象。

var app=angular.module("MyApp",[])
.controller("MyController",function($scope,$http){
    $scope.pageProduits=null;

    $http.get("http://localhost:8080/chercherProduits?mc")
    .then(function(response){
         if(response.status === 200) {
             $scope.pageProduits=response.data
         }
    }, function(error) {
        console.log(error)
    });
});

更多信息：https://docs.angularjs.org/api/ng/service/$http

【讨论】：