让Angular $http服务按顺序处理请求结果

这个场景太典型了——网络不稳定时，连续发起的请求很容易出现返回顺序颠倒的情况，导致页面显示旧的筛选结果。本质上这是竞态条件（race condition）的问题，我们需要确保只有最后一次请求的结果会被应用到视图上。下面给你两个实用的解决方案：

方法一：取消未完成的请求（推荐，AngularJS 1.5+适用） #

AngularJS从1.5版本开始支持$http请求的取消功能，我们可以在发起新请求前，取消掉上一个还在pending的请求，这样就不会有旧请求的结果干扰视图了。

在你的控制器里实现这个逻辑：

// 初始化一个用于取消请求的defer对象
var requestCanceler;

$scope.updateUsedFilter = function(used) {
  // 如果之前有未完成的请求，先取消它
  if (requestCanceler) {
    requestCanceler.resolve();
  }
  
  // 创建新的取消令牌
  requestCanceler = $q.defer();
  
  $http.get("reloadresults?used=" + used, {
    timeout: requestCanceler.promise // 将取消令牌绑定到请求上
  }).then(function(response) {
    // 只有请求成功且未被取消时，才更新数据
    $scope.items = response.data.items;
  }).catch(function(error) {
    // 主动取消的请求会返回status=-1，这类错误无需处理
    if (error.status !== -1) {
      console.error("加载商品列表失败:", error);
    }
  });
};

这个方案的优势很明显：不仅解决了竞态问题，还能节省服务器资源——既然用户已经切换了筛选条件，之前的请求结果已经没有意义了，直接取消掉能避免不必要的服务器计算和数据传输。

方法二：请求标记过滤（兼容旧版本AngularJS） #

如果你的项目还在使用低于1.5的AngularJS版本，可以用“请求ID标记”的方式：给每个请求分配一个唯一ID，只有当返回结果的ID和当前最新的请求ID一致时，才更新视图。

代码示例：

// 维护一个最新请求的ID计数器
var latestRequestId = 0;

$scope.updateUsedFilter = function(used) {
  // 给当前请求分配一个递增的ID
  var currentRequestId = ++latestRequestId;
  
  $http.get("reloadresults?used=" + used).then(function(response) {
    // 只有当前请求是最新的那次，才更新数据
    if (currentRequestId === latestRequestId) {
      $scope.items = response.data.items;
    }
  });
};

这个方法的核心是“忽略旧请求的结果”，即使旧请求后返回，只要它的ID不是最新的，就不会覆盖新的数据。虽然不能取消服务器请求，但能保证视图显示的是用户最后一次操作的结果。

内容的提问来源于stack exchange，提问作者Aflred