文明网站建设培训体会,南山最专业的网站建设,网站建设信息公开和解读回应,网站的支付接口对接怎么做网站开发普遍采用前后端分离的模式#xff0c;数据交互成为了不可或缺的关键环节。在这个过程中#xff0c;XHR 和 Fetch API 是两种最常见的方法#xff0c;用于从 Web 服务器获取数据。XHR 是一种传统的数据请求方式#xff0c;而 Fetch API 则代表了现代 Web 开发的新兴…网站开发普遍采用前后端分离的模式数据交互成为了不可或缺的关键环节。在这个过程中XHR 和 Fetch API 是两种最常见的方法用于从 Web 服务器获取数据。XHR 是一种传统的数据请求方式而 Fetch API 则代表了现代 Web 开发的新兴标准。接下来我们将一同深入学习它们的使用方法和适用场景。
XMLHttpRequest
XMLHttpRequest通常简称为 XHR。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据。XMLHttpRequest 在 AJAX 编程中比如 jquery被大量使用。 AJAX 异步 JavaScript 和 XML。许多人容易把它和 jq 的 ajax 混淆。它是一个技术统称本身不是一种技术。 特点 异步请求XHR 允许进行异步请求它可以在后台执行而不会阻止页面的其他操作。 支持跨域请求通过服务器端设置允许跨域请求从不同域的服务器获取数据。 事件驱动提供了 onload、onerror、onprogress 等一系列事件来监听请求的状态变化。 灵活性提供了对请求头、响应头以及请求方法的完全控制使其非常灵活。
工作原理
XHR 的工作原理主要为 创建 XHR 对象实例通过new XMLHttpRequest()创建一个 XHR 对象。 配置请求使用open()方法设置请求方法GET、POST 等、URL以及是否要异步执行请求。 设置回调函数设置事件处理程序来处理请求完成、成功、失败等不同的状态。 发起请求使用send()方法发送请求。 处理响应在事件处理程序中处理响应数据通常使用responseText或responseXML来访问响应内容。
// 创建一个新的XHR对象
const xhr new XMLHttpRequest();// 配置请求
xhr.open(GET, https://api.baidu.com/test, true);// 设置响应处理函数
xhr.onload function() {if (xhr.status 200) {// 请求成功const responseData xhr.responseText;console.log(成功获取数据, responseData);} else {// 请求失败console.error(请求失败状态码 xhr.status);}
};// 发起请求
xhr.send();XHR 的响应处理通常在onreadystatechange事件处理程序中完成。在上面的例子中我们等待 XHR 对象的状态变为 4表示请求完成并且 HTTP 状态码为 200表示成功响应时解析响应数据。
Fetch API
Fetch 是一种现代的数据网络请求 API它旨在解决 XHR 的一些问题提供了更强大、更灵活的方式来处理 HTTP 请求。可以理解为 XMLHttpRequest 的升级版。
特点 Promise 风格Fetch API 使用 Promise 对象来处理异步请求使代码更具可读性和可维护性。 更简单的语法相较于 XHRFetch API 的语法更加简单明了通常只需要几行代码来完成请求。 默认不接受跨域请求为了安全性Fetch API 默认不接受跨域请求但可以通过 CORS跨域资源共享来进行配置。 更现代的架构Fetch API 是建立在 Promise 和 Stream 之上的支持更灵活的数据处理和流式传输。
工作原理
Fetch 的工作原理主要为 使用fetch()函数创建请求传入要请求的 URL以及可选的配置参数例如请求方法、请求头等。 处理响应fetch()返回一个 Promise您可以使用.then()链式调用来处理响应数据例如使用.json()方法解析 JSON 数据或.text()方法获取文本数据。 错误处理您可以使用.catch()方法来捕获任何请求或响应的错误。 使用async/await如果需要您还可以使用async/await来更清晰地处理异步操作。
Fetch API 的特性和简单的语法使它在许多前端项目中成为首选工具。然而它也有一些限制例如不支持同步请求因此需要谨慎使用。
fetch(https://api.baidu.com/test).then(response {if (!response.ok) {throw new Error(请求失败状态码 response.status);}return response.json();}).then(data {// 请求成功处理响应数据console.log(成功获取数据, data);}).catch(error {// 请求失败处理错误console.error(error);});XHR 和 Fetch 的对比
XHR 和 Fetch 都用于进行 HTTP 请求但它们之间存在一些关键区别 语法 Fetch 使用 Promise更直观和易于理解。 跨域请求 Fetch 在跨域请求方面更灵活支持 CORS。 流式传输 Fetch 支持可读流适用于大文件下载。 维护性 Fetch 更容易维护和扩展。
常用库和插件
基于 XHR 封装的库 jquery一个 JavaScript 库提供了用于处理 DOM 操作、事件处理和 XHR 请求的便捷方法。 axios一个流行的 HTTP 请求库基于 XHR 开发支持浏览器和 Node.js。
基于 fetch 封装的库 redaxios它具有与 axios 类似的 API但更轻量级且适用于现代 Web 开发。 umi-request由 Umi 框架维护的网络请求库提供了强大的拦截器、中间件和数据转换功能。
总结
XMLHttpRequest (XHR) 和 Fetch API 都是前端开发中用于进行数据请求的有力工具。XHR 在传统项目中仍然有用而 Fetch API 则在现代 Web 开发中越来越流行。具体选择哪个工具取决于项目的需求和开发团队的偏好。