JavaScript中的Request详解：掌握Fetch API与XMLHttpRequest
目录
一、为什么需要Request？
二、XMLHttpRequest (XHR) 基础
1. 创建请求
2. 处理响应
3. 关键配置
三、Fetch API（推荐方案）
1. 发起GET请求
2. 发起POST请求
3. 高级配置项
四、Request对象封装（Fetch进阶）
五、错误处理最佳实践
1. Fetch API错误捕获
2. 超时控制（结合AbortController）
六、总结与选择建议
一、为什么需要Request？
在Web开发中，前端常需从服务器获取数据（如用户信息、商品列表）或提交数据（如登录表单）。JavaScript通过HTTP请求实现这一过程，核心工具为：
-
Fetch API（现代标准，基于Promise）
-
XMLHttpRequest（传统方案，兼容旧浏览器）
二、XMLHttpRequest (XHR) 基础
1. 创建请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.send();
2. 处理响应
xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log(JSON.parse(xhr.responseText)); } else { console.error('请求失败:', xhr.status); }
};
3. 关键配置
-
设置请求头：
xhr.setRequestHeader('Content-Type', 'application/json') -
指定响应类型：
xhr.responseType = 'json'
适用场景：兼容IE等旧浏览器。
三、Fetch API（推荐方案）
1. 发起GET请求
fetch('https://api.example.com/data') .then(response => { if (!response.ok) throw new Error('网络响应异常'); return response.json(); // 解析JSON数据 }) .then(data => console.log(data)) .catch(error => console.error('请求失败:', error));
2. 发起POST请求
fetch('https://api.example.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'John', age: 30 })
}); 3. 高级配置项
| 参数 | 说明 |
|---|---|
method | HTTP方法（GET/POST/PUT等） |
headers | 请求头对象（如身份验证Token） |
body | 请求体数据（支持FormData、Blob等） |
mode | 请求模式（如cors、no-cors） |
cache | 缓存策略（no-store、reload） |
四、Request对象封装（Fetch进阶）
可复用配置的Request对象示例：
const request = new Request('https://api.example.com/data', { method: 'GET', headers: new Headers({ 'Authorization': 'Bearer token123' })
}); fetch(request) .then(response => response.json()) .then(data => console.log(data));
五、错误处理最佳实践
1. Fetch API错误捕获
fetch(url) .then(response => { if (!response.ok) { throw new Error(`HTTP错误 ${response.status}`); } return response.json(); }) .catch(error => { console.error('请求异常:', error); // 显示用户提示 });
2. 超时控制（结合AbortController）
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal }) .then(/* ... */) .catch(() => console.log('请求超时')) .finally(() => clearTimeout(timeoutId)); 六、总结与选择建议
| 特性 | Fetch API | XMLHttpRequest |
|---|---|---|
| 语法简洁度 | ✅ Promise链式调用 | ❌ 回调嵌套 |
| 流式数据处理 | ✅ 支持ReadableStream | ❌ 不支持 |
| 中断请求 | ✅ AbortController | ✅ xhr.abort() |
| 浏览器兼容性 | ❌ 不兼容IE | ✅ 全浏览器兼容 |
推荐策略：
现代项目首选 Fetch API
需兼容IE时降级为 XMLHttpRequest
复杂场景使用库（如Axios）封装