JavaScript中的Request详解：掌握Fetch API与XMLHttpRequest

一、为什么需要Request？

[二、XMLHttpRequest (XHR) 基础](#二、XMLHttpRequest (XHR) 基础)

[1. 创建请求](#1. 创建请求)

[2. 处理响应](#2. 处理响应)

[3. 关键配置](#3. 关键配置)

[三、Fetch API（推荐方案）](#三、Fetch API（推荐方案）)

[1. 发起GET请求](#1. 发起GET请求)

[2. 发起POST请求](#2. 发起POST请求)

[3. 高级配置项](#3. 高级配置项)

四、Request对象封装（Fetch进阶）

五、错误处理最佳实践

[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）封装