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