Appearance
阻止重复请求基本是以用户请求参数和URL做KEY放进队列里面来,在成功后销毁和没有成功之前取消 下一次同一请求(相同请求方式、相同请求地址和相同请求参数)
AXIOS
js
import axios from 'axios'
const http = axios.create()
const CancelToken = axios.CancelToken
const pending = []
let getURL = (config) => {
return config.method === 'get' ? encodeURIComponent(config.url + JSON.stringify(config.params)) : encodeURIComponent(config.url + JSON.stringify(config.data))
}
let removePending = (ever) => {
for (let p in pending) {
if (pending[p].u === getURL(ever)) { //当当前请求在数组中存在时执行函数体
pending[p].f(); //执行取消操作
pending.splice(p, 1); //把这条记录从数组中移除
}
}
}
http.interceptors.request.use(config => {
removePending(config)
config.cancelToken = new CancelToken((c) => {
var url = getURL(config)
pending.push({u: url, f: c})
})
//do something
return config
}, error => {
return Promise.reject(error)
})
http.interceptors.response.use(
response => {
$loading.end(true)
removePending(response.config)
//do something
}, error => {
return Promise.reject(error.response)
}
)
export default http
jQuery
js
(function ($) {
var pendingRequests = {};
// 所有ajax请求的通用前置filter
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
// 不重复发送相同请求
var key = generatePendingRequestKey(options);
if (!pendingRequests[key]) {
//storePendingRequest(key, jqXHR);
pendingRequests[key] = jqXHR;
} else {
// or do other
jqXHR.abort();
}
var complete = options.complete;
options.complete = function (jqXHR, textStatus) {
// clear from pending requests
pendingRequests[key] = null;
if ($.isFunction(complete)) {
complete.apply(this, arguments);
}
};
});
function generatePendingRequestKey(opts) {
var url = opts.url;
var type = opts.type;
var data = opts.data;
var str = url + type;
if (data) {
str += data;
}
return str;
}
}(jQuery));