电商网站的成本重庆店铺整站优化
目录
一、为什么需要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）封装