如何使用Angular JS獲得POST請求的響應？

Question

我使用node，express，mongoose作爲後端和angular js作爲前端。我正在使用表單發送發佈請求。

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

其操控：

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

的結果是什麼，我不知道我要去哪裏錯了！該服務工作正常，實際上我能夠控制檯記錄結果，但我無法將其設置爲範圍。

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

請幫助我只是一個角度的起動器。

Answer 1

由於$http本身會返回承諾，因此您在使用反模式包裝$httpPromise。

此外，由於全局Promise在角度上下文之外，因此每當它改變角度時需要通知角度來運行摘要以更新視圖。使用角度承諾，情況並非如此。

更改Request.post到：

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

在控制器出現在返回的對象持有的屬性從服務器的數據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; 
    }; 

注意微小的差別在於$http方法.success()和.error()已棄用

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

不要返回false，因爲它是一個回調函數。而不是像上面那樣使用catch塊使用「功能塊」。

我改進了解決方案。如果它能夠工作，您可以重構它以將重用代碼移動到您的服務中。不要錯過在您的控制器中注入$ http。