目录
[二、XMLHttpRequest (XHR) 基础](#二、XMLHttpRequest (XHR) 基础)
[1. 创建请求](#1. 创建请求)
[2. 处理响应](#2. 处理响应)
[3. 关键配置](#3. 关键配置)
[三、Fetch API(推荐方案)](#三、Fetch API(推荐方案))
[1. 发起GET请求](#1. 发起GET请求)
[2. 发起POST请求](#2. 发起POST请求)
[3. 高级配置项](#3. 高级配置项)
[1. Fetch API错误捕获](#1. Fetch API错误捕获)
[2. 超时控制(结合AbortController)](#2. 超时控制(结合AbortController))
一、为什么需要Request?
在Web开发中,前端常需从服务器获取数据(如用户信息、商品列表)或提交数据(如登录表单)。JavaScript通过HTTP请求实现这一过程,核心工具为:
-
Fetch API(现代标准,基于Promise)
-
XMLHttpRequest(传统方案,兼容旧浏览器)
二、XMLHttpRequest (XHR) 基础
1. 创建请求
javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.send();
2. 处理响应
javascript
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请求
javascript
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请求
javascript
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对象示例:
javascript
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错误捕获
javascript
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP错误 ${response.status}`);
}
return response.json();
})
.catch(error => {
console.error('请求异常:', error);
// 显示用户提示
});
2. 超时控制(结合AbortController)
javascript
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)封装