Trae AI
4 weeks ago
3 changed files with 345 additions and 29 deletions
@ -0,0 +1,151 @@ |
|||||
|
// 对象转查询字符串函数
|
||||
|
function objectToQueryString(obj) { |
||||
|
return Object.keys(obj) |
||||
|
.map(key => key + '=' + encodeURIComponent(obj[key])) |
||||
|
.join('&'); |
||||
|
} |
||||
|
|
||||
|
// API请求管理
|
||||
|
var apiRequestManager = { |
||||
|
pendingRequests: {}, |
||||
|
|
||||
|
// 生成请求键
|
||||
|
generateRequestKey: function(url, params) { |
||||
|
var sortedParams = Object.keys(params) |
||||
|
.sort() |
||||
|
.map(key => `${key}:${params[key]}`) |
||||
|
.join('_'); |
||||
|
return `${url}_${sortedParams}`; |
||||
|
}, |
||||
|
|
||||
|
// 优先级定义
|
||||
|
PRIORITY: { |
||||
|
HIGH: 1, // 高优先级（用户主动操作，如下一页点击）
|
||||
|
MEDIUM: 2, // 中优先级（如标签页切换）
|
||||
|
LOW: 3 // 低优先级（如后台预加载）
|
||||
|
}, |
||||
|
requestQueue: [], |
||||
|
isProcessingQueue: false, |
||||
|
|
||||
|
// 发送请求
|
||||
|
sendRequest: function(url, params, callback, priority = this.PRIORITY.MEDIUM) { |
||||
|
var requestKey = this.generateRequestKey(url, params); |
||||
|
|
||||
|
// 取消之前的相同请求
|
||||
|
this.cancelRequest(requestKey); |
||||
|
|
||||
|
// 创建请求对象
|
||||
|
var request = { |
||||
|
key: requestKey, |
||||
|
url: url, |
||||
|
params: params, |
||||
|
callback: callback, |
||||
|
priority: priority, |
||||
|
xhr: null |
||||
|
}; |
||||
|
|
||||
|
// 将请求添加到队列
|
||||
|
this.requestQueue.push(request); |
||||
|
|
||||
|
// 按优先级排序队列
|
||||
|
this.requestQueue.sort((a, b) => a.priority - b.priority); |
||||
|
|
||||
|
// 处理请求队列
|
||||
|
this.processRequestQueue(); |
||||
|
|
||||
|
return requestKey; |
||||
|
}, |
||||
|
|
||||
|
// 取消请求
|
||||
|
cancelRequest: function(requestKey) { |
||||
|
if (this.pendingRequests[requestKey]) { |
||||
|
this.pendingRequests[requestKey].abort(); |
||||
|
delete this.pendingRequests[requestKey]; |
||||
|
} |
||||
|
|
||||
|
// 从队列中移除
|
||||
|
this.requestQueue = this.requestQueue.filter(request => request.key !== requestKey); |
||||
|
}, |
||||
|
|
||||
|
// 取消所有请求
|
||||
|
cancelAllRequests: function() { |
||||
|
// 取消正在处理的请求
|
||||
|
Object.keys(this.pendingRequests).forEach(key => { |
||||
|
this.cancelRequest(key); |
||||
|
}); |
||||
|
|
||||
|
// 清空队列
|
||||
|
this.requestQueue = []; |
||||
|
this.isProcessingQueue = false; |
||||
|
}, |
||||
|
|
||||
|
// 处理请求队列
|
||||
|
processRequestQueue: function() { |
||||
|
if (this.isProcessingQueue || this.requestQueue.length === 0) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.isProcessingQueue = true; |
||||
|
|
||||
|
// 取出队列中的请求
|
||||
|
var request = this.requestQueue.shift(); |
||||
|
|
||||
|
// 创建XHR对象
|
||||
|
var xhr = new XMLHttpRequest(); |
||||
|
var requestUrl = request.url + '?' + objectToQueryString(request.params); |
||||
|
|
||||
|
// 保存XHR对象
|
||||
|
request.xhr = xhr; |
||||
|
this.pendingRequests[request.key] = xhr; |
||||
|
|
||||
|
xhr.open('GET', requestUrl, true); |
||||
|
xhr.timeout = 30000; // 30秒超时
|
||||
|
|
||||
|
xhr.onreadystatechange = function() { |
||||
|
if (xhr.readyState == 4) { |
||||
|
// 移除请求
|
||||
|
delete this.pendingRequests[request.key]; |
||||
|
|
||||
|
if (xhr.status == 200) { |
||||
|
try { |
||||
|
var data = JSON.parse(xhr.responseText); |
||||
|
request.callback(null, data); |
||||
|
} catch (e) { |
||||
|
request.callback(e, null); |
||||
|
} |
||||
|
} else { |
||||
|
request.callback(new Error(`API请求失败，状态码: ${xhr.status}`), null); |
||||
|
} |
||||
|
|
||||
|
// 继续处理队列
|
||||
|
this.isProcessingQueue = false; |
||||
|
this.processRequestQueue(); |
||||
|
} |
||||
|
}.bind(this); |
||||
|
|
||||
|
xhr.ontimeout = function() { |
||||
|
delete this.pendingRequests[request.key]; |
||||
|
request.callback(new Error('API请求超时'), null); |
||||
|
|
||||
|
// 继续处理队列
|
||||
|
this.isProcessingQueue = false; |
||||
|
this.processRequestQueue(); |
||||
|
}.bind(this); |
||||
|
|
||||
|
xhr.send(); |
||||
|
}, |
||||
|
|
||||
|
// 取消低优先级请求，为高优先级请求让路
|
||||
|
cancelLowPriorityRequests: function(minPriority) { |
||||
|
// 取消正在处理的低优先级请求
|
||||
|
Object.keys(this.pendingRequests).forEach(key => { |
||||
|
var request = this.requestQueue.find(req => req.key === key); |
||||
|
if (request && request.priority > minPriority) { |
||||
|
this.cancelRequest(key); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 从队列中移除低优先级请求
|
||||
|
this.requestQueue = this.requestQueue.filter(request => request.priority <= minPriority); |
||||
|
} |
||||
|
}; |
||||
Loading…
Reference in new issue