javascript - 阻止连续的 $http 请求

Question

我正在一个 Angular 项目中工作，那里有一个包含一些数据和一些操作的网格。

单击 onclick 函数中的某个操作时，ajax 请求将发送到服务器端，这是一生一次的过程。

但是，当用户在第一个请求响应到来之前连续单击操作按钮时，同一调用将多次发送到服务器，最终会出现错误。

我尝试在 ajax 请求之前禁用操作按钮，尽管我无法阻止它进行多个请求。有什么方法可以阻止第二个请求吗？

我的代码是

$http({
  method: 'POST',
  url: urls.api_url_serv + 'notification/read?token=' + token,
  transformRequest: transformRequestAsFormPost,
  withCredentials: false,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  data: {
    notification_id: notification_id
  }
}).then(function(response) {
  var data = response.data;
  //Some actions 

}).catch(function(response) {
  var status = response.status;

  // Some actions

});

<span ng-class="{'disabled': read_disable}">
<i class="fa fa-envelope" ng-click="MarkAsReadNotification(row.id)"></i>
</span>

Answer 1

例如，你可以用惯用的方式来做(使用ES6语法简单地使用this)

this.makeRequest = () => {
  if (!this.request) {
    this.request = $http({
      method: 'POST',
      url: urls.api_url_serv + 'notification/read?token=' + token,
      transformRequest: transformRequestAsFormPost,
      withCredentials: false,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: { notification_id }
    });

    this.request.success((data) => {
      // If you want let the user do a request, after this one is finished
      this.request = undefined
    })
  }
}