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)的核心技术,答应网页在不重新加载的情况下与服务器交换数据。
核心特点


基本用法

以下是 XMLHttpRequest 的基本使用步调:
创建对象
  1. const xhr = new XMLHttpRequest();
复制代码
设置请求

设置回调函数

发送请求

处理惩罚相应

 完整的示例:
  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,提供了更简洁、灵活的语法,并支持流式数据处理惩罚。
核心特点


基本用法

以下是 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));
复制代码
处理惩罚相应

错误处理惩罚

高级用法

设置请求头
  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. });
  4. Promise.race([fetch(url), timeout])
  5.   .then(response => response.json())
  6.   .then(data => console.log(data))
  7.   .catch(error => console.error(error));
复制代码
取消请求:使用 AbortController 取消请求
  1. const controller = new AbortController();
  2. const signal = controller.signal;
  3. fetch(url, { signal })
  4.   .then(response => response.json())
  5.   .then(data => console.log(data))
  6.   .catch(error => console.error(error));
  7. // 取消请求
  8. controller.abort();
复制代码
优缺点


3. XMLHttpRequest vs Fetch:如何选择?

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


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