如何用Promise封装XMLHttpRequest？

<think>我们使用Promise来封装XMLHttpRequest，以便能够以链式调用的方式处理异步请求，避免回调地狱。封装的核心思想是将XMLHttpRequest的请求过程包装在一个Promise对象中，当请求成功时调用resolve函数，失败时调用reject函数。 具体步骤： 1. 创建一个返回Promise对象的函数。 2. 在函数内部创建XMLHttpRequest对象。 3. 设置请求的方法、URL和异步标志（通常为true）。 4. 监听请求的状态变化（onreadystatechange事件）。 5. 当请求完成（readyState为4）时，根据HTTP状态码判断请求成功与否： - 状态码在200~299之间，则认为请求成功，调用resolve方法返回响应数据。 - 其他状态码则调用reject方法返回错误信息。 6. 处理网络错误（onerror事件）和超时错误（ontimeout事件），调用reject。 7. 发送请求（send方法）。 另外，我们还可以设置请求头、超时时间等。 下面是一个具体的封装示例：</think>### 使用Promise封装XMLHttpRequest实现优雅异步请求 以下是使用Promise封装XMLHttpRequest的完整实现方案，通过链式调用解决回调地狱问题： ```javascript function ajaxPromise(method, url, data = null) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); // 1. 创建XMLHttpRequest对象[^1] xhr.open(method, url, true); // 初始化请求 // 设置请求头（POST请求需要） if (method === 'POST') { xhr.setRequestHeader('Content-Type', 'application/json'); } // 2. 监听状态变化[^1] xhr.onreadystatechange = function() { if (xhr.readyState === 4) { // 请求完成 if (xhr.status >= 200 && xhr.status < 300) { try { // 3. 成功获取响应[^1] resolve(JSON.parse(xhr.responseText)); } catch (e) { reject(new Error('JSON解析失败')); } } else { reject(new Error(`请求失败: ${xhr.status} ${xhr.statusText}`)); } } }; // 错误处理 xhr.onerror = () => reject(new Error('网络错误')); xhr.ontimeout = () => reject(new Error('请求超时')); // 发送请求（处理GET/POST差异） method === 'GET' ? xhr.send() : xhr.send(JSON.stringify(data)); }); } ``` #### 使用示例（链式调用） ```javascript // GET请求示例 ajaxPromise('GET', 'https://api.example.com/data') .then(response => { console.log('获取数据成功:', response); return ajaxPromise('POST', 'https://api.example.com/update', {id: 1}); }) .then(updatedData => { console.log('更新成功:', updatedData); }) .catch(error => { console.error('请求失败:', error.message); }) .finally(() => { console.log('请求流程结束'); }); ``` #### 封装优势说明 1. **链式调用** 通过`.then()`实现顺序异步操作，避免回调嵌套（回调地狱）[^2][^3] 2. **统一错误处理** 使用`.catch()`集中处理所有可能的错误（网络错误/超时/状态码错误） 3. **状态管理** Promise三种状态： - `pending`：请求进行中 - `fulfilled`：请求成功（执行resolve） - `rejected`：请求失败（执行reject）[^5] 4. **资源清理** `.finally()`确保无论成功失败都执行清理操作[^5] #### 高级功能扩展 ```javascript // 添加超时控制 function ajaxWithTimeout(method, url, timeout = 5000) { return Promise.race([ ajaxPromise(method, url), new Promise((_, reject) => setTimeout(() => reject(new Error('超时中断')), timeout) ) ]); } // 使用示例 ajaxWithTimeout('GET', '/api/data', 3000) .then(/*...*/) .catch(/* 处理超时或请求错误 */); ``` > **关键点**：Promise封装将异步操作抽象为可管理的状态对象，配合`async/await`语法可进一步简化代码： > ```javascript > async function fetchData() { > try { > const data = await ajaxPromise('GET', '/api/data'); > // 同步方式编写异步逻辑 > } catch (error) { > // 统一错误处理 > } > } > ``` --- ### 相关问题延伸 1. **Promise与回调函数的性能差异** Promise在V8引擎中是否有额外性能开销？如何优化高频AJAX请求？[^4] 2. **Promise.all的并发控制** 当需要同时发送10个请求但限制最大并发数为3时，如何实现？[^4] 3. **取消Promise请求** 如何在请求中途取消Promise（如用户离开页面时）？[^2] 4. **Promise的错误冒泡机制** 为什么链式调用中一个`.catch()`能捕获整个链条的错误？[^3] > 提示：现代浏览器已原生支持`fetch API`（基于Promise设计），但本文方案兼容旧浏览器且更易理解底层机制[^1]。 --- ### 引用说明 [^1]: 创建XMLHttpRequest对象分三步：创建对象、发送请求、获取响应 [^2]: Promise通过统一接口规范处理异步操作，避免回调地狱 [^3]: Promise构造函数通过then/catch方法实现链式调用 [^4]: Promise.race实现超时控制的关键机制 [^5]: Promise三种状态转换和finally清理操作