Wie kann ich die Antwort einer POST-Anfrage mit Angular JS bekommen?

Question

Ich benutze Knoten, Express, Mungo für Backend und eckige js für Front-End. Ich sende eine Postanfrage mit einem Formular.

<div class="alert alert-success" ng-show="success"> 
    {{success}} 
</div> 

<div class="alert alert-danger" ng-show="error"> 
    {{error}} 
</div> 

    <form id="newCategory" ng-submit="submit()"> 
    <div class="row"> 
     <div class="col-md-4"> 
     {{mySubmit}} 
     <div class="form-group"> 
      <input id="name" name="name" type="text" 
      placeholder="Name" class="form-control input-md" 
      ng-model="catName"> 
     </div><!-- ./form-group --> 

     </div><!-- ./col --> 

     <div class="form-group"> 
     <input type="submit" name="submit" value="submit" class="btn btn-primary"> 
     </div><!-- ./form-group --> 

    </div><!-- ./row --> 
    </form> 

Sein Controller:

fetchModule.controller('CatsNewCtrl', ['$scope', '$rootScope', 'Request', 
    function($scope, $rootScope, Request) { 
     // Root Scope 
     $rootScope.heading = 'Categories'; 
     $rootScope.heading2 = 'new'; 
     $rootScope.newLink = undefined; 

     $scope.catName = ""; 
     $scope.submit = function() { 
     Request.post('/category', { name : $scope.catName }) 
      .then(function(data) { 
      $scope.success = data.msg; 
      }) 
      .catch(function(status) { 
      $scope.error = "Error: " + status; 
      }); 
     return false; 
     }; 
    }]); 

Ergebnis ist nichts, ich weiß nicht, wohin ich falsch gehe! Dieser Dienst funktioniert einwandfrei. Ich konnte das Ergebnis zwar per Konsole protokollieren, aber ich kann es nicht für den Bereich festlegen.

(function() { 
    let fetchModule = angular.module('fetchModule', []); 

    /** 
    * A Service for Requests. 
    */ 
    fetchModule.service('Request', ['$http', function($http) { 
    /** 
    * Get's content of a specific URL. 
    * @param {String} url - URL to GET. 
    * @return {Promise} Promise resolves with contents or rejects with an error. 
    */ 
    this.get = function(url) { 
     // Promise 
     return new Promise((resolve, reject) => { 
     $http.get(url) 
      .success(result => { 
      resolve(result); 
      }) 
      .error((err, status) => { 
      reject(err); 
      }); 
     }); 
    }; 

/** 
* Get's content of a specific URL. 
* @param {String} url - URL to GET. 
* @param {String} data - Data to post. 
* @return {Promise} Promise resolves with contents or rejects with an error. 
*/ 
this.post = function(url, data) { 
    // Promise 
    return new Promise((resolve, reject) => { 
    $http.post(url, data) 
     .success((data, status, headers, config) => { 
     resolve(data); 
     }) 
     .error((data, status, headers, config) => { 
     resolve(status); 
     }); 
    }); 
}; 

Bitte helfen, ich bin nur ein Winkelanlasser.

Answer 1

Sie verwenden eine Anti-Pattern-Verpackung $http in Promise, da $http selbst eine Verheißung zurückgibt.

Da global Promise außerhalb des eckigen Kontexts ist, muss der Bereichswinkel bei jeder Änderung benachrichtigt werden, um einen Auszug auszuführen, um die Ansicht zu aktualisieren. Mit kantigen Versprechen ist dies nicht der Fall.

ändern Request.post zu:

this.post = function(url, data) { 
    return $http.post(url, data); 
}; 

In Controller gibt es einen kleinen Unterschied, daß das Objekt hält, von dem Server in einer Eigenschaft, die Daten zurück data

$scope.submit = function() { 
    Request.post('/category', { name : $scope.catName }) 
     .then(function(resp) { 
     $scope.success = resp.data.msg; 
     }) 
     .catch(function(err) { 
     $scope.error = "Error: " + err.status; 
     }); 
    return false; 
    }; 

anzumerken, dass $http Methoden .success() und .error() sind veraltet

Answer 2

scope.submit = function() { 
    $http({ 
     url:'/category', 
     method:'POST' 
     data:{ name : $scope.catName }, 
     headers: {'Content-Type': 'application/json'}, 
    }) 
     .then(function(resp) { 
     $scope.success = resp.data.msg; 
     },function(error){ 
     $scope.error = "Error: " + err.status;} 
    )}; 

Geben Sie nicht false zurück, da es sich um eine Rückruffunktion handelt. Verwenden Sie anstelle von catch block "function-block" wie oben.

Ich habe die Lösung verbessert. Wenn es funktioniert, können Sie es neu strukturieren, um wiederverwendeten Code zu Ihrem Dienst zu verschieben. Verpassen Sie nicht, $ http in Ihrem Controller zu injizieren.