AngularJS version 1.6 change from `.success` method to `.then` method

问题

actually am following a spring tutorial .. coming to Angularjs he is using .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);
    });

});

now my problem is that success is not working and after searshing i descovered that The .success and .error methods are deprecated and have been removed from AngularJS 1.6. i have to the standard .then method instead. Can someone convert me the existing code to code with the then mothod ? i tried but i failed can anyone helps plz bcz am not familiar with javaScript ? Thank you

回答1:

Before

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

After

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

For more information, see AngularJS Developer Guide - Migrating from V1.5 to V1.6

See also, Why are angular $http success/error methods deprecated? Removed from v1.6?

回答2:

use then like this to catch the response. make sure to use response.data because response data comes under data property

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

use ng repeat to show the data in row wise

<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>

回答3:

The AngularJS $http service makes a request to the server, and returns a response.Use then instead of success like below:

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:

As per angular Js official documentations. Success and error methods are no longer available. These methods are depreciated instead they recommend to use standard .then method. Succces methods return only the data from the response but in .then method, full response object is returned.

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

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

来源：https://stackoverflow.com/questions/42895684/angularjs-version-1-6-change-from-success-method-to-then-method

标签

angularjs

angular-http

angularjs-1.6