主动中断请求

For 体验: 很多时候，请求后台接口比较慢，还在等待返回。如果此时用户选择了切换页面，这时候我们可以选择将还在进行中的请求主动中断。

jQuery

参考

//可以在通用的入口abort()掉request
var request = $.ajax({
  type: 'POST',
  url: 'someurl',
  success: function(result){}
});

request.abort();

Angular1.x

$http
$q
$http(config)

angular.module('app.services', [])
// 发送中的请求
.factory('PendingRequests', [
  function(){
    var list = []; // 私有变量
    return {
      push: function(canceller){
        list.push(canceller);
      },
      remove: function(canceller){
        var index = _.indexOf(list, canceller);
        if (index > -1) {
          list.splice(index, 1);
        }
      },
      clear: function(){
        _.forEach(list, function(item){
          item.resolve();
        });
        list = [];
      }
    };
  }
])

// 请求包装
.factory('RequestWrapper', [
          '$q', '$http', 'PendingRequests',
  function($q ,  $http ,  PendingRequests){
    function wrapper(type, config, options){
      // 自动中断的canceller
      var canceller;
      // 主动传入 `timeout` 不自动中断
      if (!config.hasOwnProperty('timeout')) {
        canceller = $q.defer();
        config.timeout = canceller.promise;
      }

      var req = $http(config);
      if (canceller) {
        PendingRequests.push(canceller);
      }

      var defer = $q.defer();
      req.then(function(res){
        var match = type === 'array' ?
            angular.isArray(res.data) :
            angular.isObject(res.data) && !angular.isArray(res.data);
        if (match) {
          defer.resolve(res.data);
        } else {
          res.TypeError = true;
          defer.reject(res);
        }
      }, function(res){
        defer.reject(res);
        if (res.status === 0) {
          // 请求主动中断
          return;
        }
      });

      if (canceller) {
        // 请求已完成，从 pending 中移除
        req['finally'](function(){
          PendingRequests.remove(canceller);
        });
      }
      return defer.promise;
    }

    // array 或 object 两种返回
    return {
      array: function(req, options){
        return wrapper('array', req, options);
      },
      object: function(req, options){
        return wrapper('object', req, options);
      }
    };
  }
])