如何使用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。