From 633544a895b13ec0065bc45cbcd6b4387f0e485a Mon Sep 17 00:00:00 2001 From: 17792275749 <812100002@qq.com> Date: Fri, 13 Jun 2025 17:58:44 +0800 Subject: [PATCH] =?UTF-8?q?XMLHttpRequest=20=E8=AE=BE=E7=BD=AE=E8=B6=85?= =?UTF-8?q?=E6=97=B6=E6=97=B6=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/XMLHttpRequest/index.js | 84 +++++++++++++++++++++++++++---------- 1 file changed, 62 insertions(+), 22 deletions(-) diff --git a/src/XMLHttpRequest/index.js b/src/XMLHttpRequest/index.js index 72a133e..1934ca5 100644 --- a/src/XMLHttpRequest/index.js +++ b/src/XMLHttpRequest/index.js @@ -4,23 +4,30 @@ * @param {string} url - 请求的 URL * @param {Object} params - 请求参数(对于 GET 请求会拼接到 URL,对于 POST 请求放在请求体中) * @param {Object} headers - 请求头对象(键值对形式) + * @param {number} timeout - 请求超时时间,单位毫秒 (ms)。默认 15000ms。 * @returns {Promise} 返回一个 Promise,解析为响应数据或拒绝为错误 */ -export function httpRequest(method, url, params, headers) { +export function httpRequest(method, url, params, headers, timeout = 15000) { // 添加 timeout 参数和默认值 return new Promise(function(resolve, reject) { let xhr = new XMLHttpRequest(); - // xhr.withCredentials = true; + // xhr.withCredentials = true; // 根据需要启用或禁用 + let queryString = ''; + // 日志:请求开始 + console.log(`H5 Log: httpRequest - 发起请求: ${method.toUpperCase()} ${url}`); + // 将 params 转为查询字符串(仅对 GET 请求有效) if (params && method.toUpperCase() === 'GET') { queryString = Object.keys(params).map(function(key) { return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&'); url += (url.indexOf('?') === -1 ? '?' : '&') + queryString; + console.log(`H5 Log: httpRequest - GET 请求最终 URL: ${url}`); } xhr.open(method.toUpperCase(), url, true); + xhr.timeout = timeout; // 设置请求超时时间 // 设置请求头 if (headers) { @@ -30,40 +37,73 @@ export function httpRequest(method, url, params, headers) { } } } + console.log(`H5 Log: httpRequest - 请求头设置: ${JSON.stringify(headers)}`); - // 监听请求状态变化 - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { // 请求完成 - if (xhr.status >= 200 && xhr.status < 300) { // 请求成功 - try { - let response = JSON.parse(xhr.responseText); // 尝试解析为 JSON - resolve(response); - } catch (e) { - resolve(xhr.responseText); // 如果不是 JSON,返回原始文本 - } - } else { - reject({ - status: xhr.status, - statusText: xhr.statusText, - response: xhr.responseText - }); + // 监听请求成功加载(无论 HTTP 状态码) + xhr.onload = function() { + console.log(`H5 Log: httpRequest - 请求加载完成,状态码: ${xhr.status}, 状态文本: ${xhr.statusText}`); + if (xhr.status >= 200 && xhr.status < 300) { // 请求成功 + try { + let response = JSON.parse(xhr.responseText); // 尝试解析为 JSON + console.log(`H5 Log: httpRequest - 响应成功 (JSON): ${JSON.stringify(response).substring(0, 200)}...`); // 打印部分响应 + resolve(response); + } catch (e) { + console.warn(`H5 Log: httpRequest - JSON 解析失败,返回原始文本。错误: ${e.message}`); + resolve(xhr.responseText); // 如果不是 JSON,返回原始文本 } + } else { + console.error(`H5 Log: httpRequest - HTTP 错误响应,状态: ${xhr.status}`); + reject({ + status: xhr.status, + statusText: xhr.statusText, + response: xhr.responseText // 包含错误响应体 + }); } }; + // 监听网络错误 xhr.onerror = function() { + console.error('H5 Log: httpRequest - 网络错误或请求被阻止。'); reject({ - status: xhr.status, - statusText: xhr.statusText + status: xhr.status, // 通常为 0 + statusText: 'Network Error', + response: xhr.responseText + }); + }; + + // 监听请求超时 + xhr.ontimeout = function() { + console.error(`H5 Log: httpRequest - 请求超时 (${timeout}ms)。`); + reject({ + status: xhr.status, // 通常为 0 + statusText: 'Request Timeout', + response: xhr.responseText + }); + }; + + // 监听请求被中止 + xhr.onabort = function() { + console.warn('H5 Log: httpRequest - 请求被中止。'); + reject({ + status: xhr.status, // 通常为 0 + statusText: 'Request Aborted', + response: xhr.responseText }); }; // 发送请求(对于 POST 请求需要发送 JSON 格式的参数) if (method.toUpperCase() === 'POST') { xhr.setRequestHeader('Content-Type', 'application/json'); - xhr.send(JSON.stringify(params)); + try { + const postData = JSON.stringify(params); + console.log(`H5 Log: httpRequest - POST 请求体: ${postData.substring(0, 200)}...`); + xhr.send(postData); + } catch (e) { + console.error(`H5 Log: httpRequest - POST 参数 JSON 化失败: ${e.message}`); + reject(new Error(`Failed to stringify POST parameters: ${e.message}`)); + } } else { xhr.send(); } }); -} +} \ No newline at end of file