XMLHttpRequest 设置超时时间

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();
         }
     });
-}
+}