IT评测·应用市场-qidao123.com

标题: 从 XMLHttpRequest 到 Fetch：当代 Web 请求技术的演进 [打印本页]

---

作者: 汕尾海湾    时间: 昨天 22:31
标题: 从 XMLHttpRequest 到 Fetch：当代 Web 请求技术的演进
在当代 Web 开发中，与服务器进行数据交互是必不可少的一部门。无论是加载动态内容、提交表单数据，还是实现及时更新，都必要通过 HTTP 请求来完成。本文将介绍两种主流的 Web 请求技术：XMLHttpRequest 和 Fetch API，探究它们的优缺点、使用场景以及如何选择符合的技术。
  1. XMLHttpRequest：Web 请求的基石

什么是 XMLHttpRequest？

XMLHttpRequest 是一个 JavaScript 对象，用于在浏览器和服务器之间发送 HTTP 请求。它是实现 AJAX（Asynchronous JavaScript and XML）的核心技术，答应网页在不重新加载的情况下与服务器交换数据。
核心特点

• 异步通讯：可以在后台发送请求，不会阻塞页面渲染。
  
• 支持多种数据格式：固然名字中包罗 XML，但它可以处理惩罚 JSON、HTML、纯文本等多种数据格式。
  
• 跨域请求：通过 CORS（跨域资源共享）支持跨域请求。
  

基本用法

以下是 XMLHttpRequest 的基本使用步调：
创建对象：

1. const xhr = new XMLHttpRequest();

复制代码

设置请求：

• 使用 open() 方法设置请求类型（GET、POST 等）和目标 URL。
  
• 比方：
  
  1. xhr.open('GET', 'https://api.example.com/data', true);

  复制代码

设置回调函数：

• 监听 onreadystatechange 事件，处理惩罚服务器相应。
  
• 比方：
  
  1. xhr.onreadystatechange = function() {
  2.     if (xhr.readyState === 4 && xhr.status === 200) {
  3.         console.log(xhr.responseText);
  4.     }
  5. };

  复制代码

发送请求：

• 使用 send() 方法发送请求。
  
• 比方：
  
  1. xhr.send();

  复制代码

处理惩罚相应：

• 通过 responseText 或 responseXML 获取服务器返回的数据。
  

 完整的示例：

1. const xhr = new XMLHttpRequest();
2. xhr.open('GET', 'https://api.example.com/data', true);
3. xhr.onreadystatechange = function() {
4.     if (xhr.readyState === 4 && xhr.status === 200) {
5.         const data = JSON.parse(xhr.responseText);
6.         console.log(data);
7.     }
8. };
9. xhr.send();

复制代码

优缺点

• 长处：
  
  
  
  • 兼容性好，几乎支持全部浏览器。
    
  • 功能强大，支持多种数据格式和跨域请求。
    
  
  
• 缺点：
  
  
  
  • 语法复杂，回调函数嵌套轻易导致“回调地狱”。
    
  • 错误处理惩罚不敷直观。
    
  
  

2. Fetch API：当代 Web 请求的新标准

什么是 Fetch？

Fetch 是当代浏览器提供的一个用于发起网络请求的 API，旨在更换 XMLHttpRequest。它基于 Promise，提供了更简洁、灵活的语法，并支持流式数据处理惩罚。
核心特点

• 基于 Promise：使用 Promise 处理惩罚异步操纵，代码更易读。
  
• 简洁的语法：相比 XMLHttpRequest，Fetch 的代码更简洁直观。
  
• 流式数据处理惩罚：支持处理惩罚大文件或流式数据。
  
• 内置 CORS 支持：默认支持跨域请求。
  

基本用法

以下是 Fetch 的基本使用示例：
发起 GET 请求：

1. fetch('https://api.example.com/data')
2.   .then(response => response.json()) // 将响应解析为 JSON
3.   .then(data => console.log(data))   // 处理数据
4.   .catch(error => console.error(error)); // 捕获错误

复制代码

 发起 POST 请求：

1. fetch('https://api.example.com/data', {
2.     method: 'POST',
3.     headers: {
4.         'Content-Type': 'application/json'
5.     },
6.     body: JSON.stringify({ key: 'value' }) // 发送 JSON 数据
7. })
8.   .then(response => response.json())
9.   .then(data => console.log(data))
10.   .catch(error => console.error(error));

复制代码

处理惩罚相应：

• response.json()：剖析为 JSON。
  
• response.text()：剖析为文本。
  
• response.blob()：剖析为二进制数据（如图片、文件）。
  
• response.arrayBuffer()：剖析为二进制数组。
  

错误处理惩罚：

• Fetch 只有在网络错误时才会触发 catch，HTTP 错误（如 404、500）必要通过 response.ok 或 response.status 手动查抄。
  
• 比方：
  
  1. fetch(url)
  2.   .then(response => {
  3.       if (!response.ok) {
  4.           throw new Error('Network response was not ok');
  5.       }
  6.       return response.json();
  7.   })
  8.   .then(data => console.log(data))
  9.   .catch(error => console.error(error));

  复制代码

高级用法

设置请求头：

1. fetch(url, {
2.     headers: {
3.         'Authorization': 'Bearer token',
4.         'Content-Type': 'application/json'
5.     }
6. });

复制代码

 超时控制：Fetch 本身不支持超时设置，但可以通过 Promise.race 实现

1. const timeout = new Promise((resolve, reject) => {
2.     setTimeout(() => reject(new Error('Request timed out')), 5000);
3. });
5. Promise.race([fetch(url), timeout])
6.   .then(response => response.json())
7.   .then(data => console.log(data))
8.   .catch(error => console.error(error));

复制代码

取消请求：使用 AbortController 取消请求

1. const controller = new AbortController();
2. const signal = controller.signal;
4. fetch(url, { signal })
5.   .then(response => response.json())
6.   .then(data => console.log(data))
7.   .catch(error => console.error(error));
9. // 取消请求
10. controller.abort();

复制代码

优缺点

• 长处：
  
  
  
  • 语法简洁，基于 Promise，易于使用。
    
  • 支持流式数据处理惩罚和更强大的功能。
    
  
  
• 缺点：
  
  
  
  • 必要手动查抄 HTTP 错误。
    
  • 兼容性较差（不支持 IE 浏览器）。
    
  
  

3. XMLHttpRequest vs Fetch：如何选择？

特性XMLHttpRequestFetch语法基于回调，较复杂基于 Promise，更简洁错误处理惩罚自动处理惩罚 HTTP 错误必要手动查抄 HTTP 错误流式数据处理惩罚不支持支持取消请求使用 xhr.abort()使用 AbortController兼容性全部浏览器支持当代浏览器支持 选择建议

• 使用 Fetch：
  
  
  
  • 假如你的项目面向当代浏览器，推荐使用 Fetch，由于它更简洁、功能更强大。
    
  • 假如必要处理惩罚流式数据或实现更复杂的请求逻辑，Fetch 是更好的选择。
    
  
  
• 使用 XMLHttpRequest：
  
  
  
  • 假如必要兼容旧浏览器（如 IE），XMLHttpRequest 是唯一的选择。
    
  • 假如你对 Fetch 的错误处理惩罚机制不满足，也可以选择 XMLHttpRequest。
    
  
  

4. 总结

从 XMLHttpRequest 到 Fetch，Web 请求技术经历了明显的演进。XMLHttpRequest 作为 AJAX 的基石，为当代 Web 应用奠定了底子；而 Fetch 则以其简洁的语法和强大的功能，成为当代开发的首选工具。
在现实开发中，选择哪种技术取决于项目需求和目标用户。假如你必要兼容旧浏览器，XMLHttpRequest 是可靠的选择；假如你寻求更当代的开发体验，Fetch 无疑是更好的工具。无论选择哪种技术，明确它们的原理和使用场景，都是成为一名良好开发者的关键。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4