如何采集网站文章软件开发工具包括

目录

一、为什么需要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. 高级配置项

参数	说明
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）封装