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请求实现这一过程，核心工具为：

1. Fetch API（现代标准，基于Promise）

2. 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. 高级配置项

四、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

• 需兼容IE时降级为 XMLHttpRequest

• 复杂场景使用库（如Axios）封装