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){// 自動中斷的cancellervar 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);}};} ])

總結

以上是生活随笔為你收集整理的主动中断请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。