AngularJS - 使用 $http.POST 提交表单时响应时间极慢答案

【问题标题】：AngularJS - Extremely slow response-time when submitting a form with $http.POSTAngularJS - 使用 $http.POST 提交表单时响应时间极慢
【发布时间】：2017-08-12 06:25:22
【问题描述】：

我对 Angular 的经验很少，现在我在使用 ng-submit() 提交基本 HTML 表单后无法发送 POST 请求。 post-request 发送到 Node.js-server，使用 http-service 时响应时间非常慢。必须出错的代码在 scope.submitMeeting() 函数中。它从 meetingService (addMeeting) 触发一个方法。

var app = angular.module('meetingApp', []);

app.service('meetingService', function($http) {
  this.getNewData = function(date) {
    return $http({
    method: 'GET',
    url: '/meetings/date/' + date
    })
  }
  this.addMeeting = function(formData) {
    return $http({
      method: 'POST',
      data: formData,
      url: '/meetings'
    })
  }
});

app.controller('adminCtrl', function ($scope, $http, $path, meetingService){
  $http({
    method: 'GET',
    url: '/meetings/date/' + getToday()
  }).then(function successCallback(response) {
    $scope.meetings = response.data;
  }, function errorCallback(error) {
    alert(error.statusText);
  });

  var formData = [];

  $scope.submitMeeting = function(formData) {
    formdata = $scope.form;
    meetingService.addMeeting(formdata).then(function successCallback(response) {
      alert('You have added a meeting!');
    }, function errorCallback(error) {
      alert(error.statusText + ': Something went terribly wrong!');
    });
  }

  $scope.dateSearch = getToday();
  $scope.submitSearch = function() {
    meetingService.getNewData($scope.dateSearch).then(function successCallback(response) {
      $scope.meetings = response.data;
    }, function errorCallback(error) {
      alert(error.statusText);
    });
  }
});

据我所知，这里没有任何问题。在使用 Postman 进行测试时，我的后端似乎也可以正常工作。以下是供参考的表格：

<form ng-submit="submitMeeting()">
          <div class="form-group">
            <label for="exampleInputEmail1">Dato</label>
            <input type="text" class="form-control" id="datepicker2" aria-describedby="emailHelp" placeholder="Velg dato" name="date" ng-model="form.date" required>
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">Klokkeslett</label>
            <div id="timeSelect">
              <select name="time" ng-model="form.time" required>
                <option>08</option>
                <option>09</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>00</option>
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
                <option>07</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Firma</label>
            <input type="text" class="form-control" placeholder="Skriv inn firma" name="company" ng-model="form.company" required>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Gjest</label>
            <input type="text" class="form-control" placeholder="Skriv inn gjest" ng-model="form.guest" name="guest">
          </div>
          <div class="form-group">
            <label for="exampleSelect2">Møterom</label>
            <input type="text" class="form-control" placeholder="Skriv inn møterom/sted" ng-model="form.room" name="room" required>
          </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Tilbake</button>
                <button type="submit" class="btn btn-primary">Legg til</button>
              </div>
            </div>
          </form>

【问题讨论】：

如果您从开发者控制台的网络选项卡中查看，您会得到什么响应时间？
您在调试器的网络面板中看到了什么？
如果您在网络选项卡中看到发布请求，则 JavaScript 中的某些东西不太可能延迟响应。在这一点上，它一定是服务器端的问题。传递给addMeeting 的formData 参数是什么？您是否有可能在那里发送导致服务器出现问题的内容？
@user4612744，你也可以从网络选项卡中查看请求数据或请求大小吗？
angular是原因的可能性很低，我认为你应该在服务器端调试一次。

标签： javascript angularjs node.js forms post

【解决方案1】：

事实证明，正如你们中的许多人所预测的那样，这是一个服务器端错误。我缺少一个 res.json() 语句，因此没有从 POST 路由返回到客户端的响应。

【讨论】：