点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！
哈喽，大家好，我是
xy👨🏻💻。今天给大家分享8个网络请求 Api！最后一种 99% 的前端都不知道！
在前端开发的世界里，我们经常需要与服务器进行数据交互。这通常涉及到发送请求和接收响应。
你可能已经熟悉了一些常用的请求方式，比如XMLHttpRequest和Fetch API。
但是，前端的请求方式远不止这些。今天，就让我们一起来探索前端请求的多种方式，涨涨知识！
1. XMLHttpRequest：经典老将
XMLHttpRequest（XHR）是前端请求的元老级人物。它允许我们进行异步 HTTP 请求，从服务器获取数据或向服务器发送数据。尽管它的 API 略显复杂，但它依然在很多旧项目中发挥着作用。
优点：
广泛支持，几乎所有的浏览器都支持。 灵活，支持各种类型的请求和响应。 异步通信，允许在不阻塞用户界面的情况下进行后台数据传输。
缺点：
复杂性高，API 使用起来较为复杂。 不支持 Promise，异步请求的处理不够简洁。 不适用于实时通信。
示例代码：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
2. Fetch API：现代新贵
Fetch API是近年来的新星，它基于 Promise 设计，使得异步请求的处理更加简洁和直观。Fetch不仅语法优雅，还提供了更好的错误处理机制，并且支持发送和接收多种类型的数据。
优点：
基于 Promise，使得异步请求处理更加简洁和直观。 现代语法，语法简洁，易于理解和使用。 原生支持 CORS，更好地处理跨域请求。
缺点：
较新的 API，一些旧浏览器不支持，需要 polyfill。 错误处理，默认情况下，只有网络失败时才会拒绝 Promise。
示例代码：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
3. Beacon API：默默无闻的小帮手
如果你需要在页面关闭或跳转时发送一些统计数据，Beacon API是一个很好的选择。它允许异步地发送少量数据到服务器，确保数据发送成功，即使页面已经关闭。
优点：
非阻塞，在页面卸载时发送数据，不会阻塞页面的卸载过程。 轻量级，适合发送小量数据。
缺点：
数据量限制，只适合发送少量数据。 有限的错误处理，无法获取发送失败的详细反馈。
示例代码：
navigator.sendBeacon('https://api.example.com/analytics', new Blob(['event=pageUnload×tamp=' + Date.now()], { type: 'text/plain' }));
4. WebSocket API：实时通信的利器
对于需要实时数据交换的场景，如在线聊天或实时游戏，WebSocket API提供了全双工通信通道，允许浏览器和服务器之间进行长时间的实时数据交换。
优点：
全双工通信，允许服务器和客户端之间进行实时、双向的通信。 持久连接，一旦建立，可以持续发送和接收数据，无需重复建立连接。
缺点：
实现复杂，需要处理连接的建立、维护和关闭。 防火墙和代理问题，可能需要特定的配置来允许 WebSocket 流量。
示例代码：
const socket = new WebSocket('wss://api.example.com/socket');
socket.onopen = function(event) {
socket.send('Hello Server!');
};
socket.onmessage = function(event) {
console.log('Message from server ', event.data);
};
5. Server-Sent Events (SSE)：单向推送的好手
与WebSocket不同，Server-Sent Events允许服务器向客户端推送实时事件，但不支持客户端向服务器发送数据。这使得SSE在实现如实时股票价格更新等场景时变得非常简单实用。
优点：
单向实时通信，服务器向客户端推送数据。 基于 HTTP，易于理解和实现。
缺点：
单向通信，只支持服务器到客户端的数据流。 浏览器支持，不是所有浏览器都支持 SSE。
示例代码：
const eventSource = new EventSource('https://api.example.com/events');
eventSource.onmessage = function(event) {
console.log('New event from server: ', event.data);
};
6. XMLHttpRequest Level 2：老将的进阶版
虽然XMLHttpRequest已经不再是最热门的选择，但XMLHttpRequest Level 2（XHR2）引入了一些新功能，如FormData和Blob对象，使得发送表单数据和二进制数据更加容易。
优点：
跨域请求支持，通过 CORS 实现。 进度事件，可以监控请求的进度。 Blob 和 ArrayBuffer 支持，发送和接收二进制数据。
缺点：
复杂性增加，相比于原始的 XMLHttpRequest，XHR2 增加了复杂性。 浏览器兼容性问题，一些旧版浏览器可能不完全支持。
示例代码：
const formData = new FormData();
formData.append('file', fileInput.files[0]);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/upload', true);
xhr.send(formData);
7. WebRTC：实时通信的全能选手
WebRTC主要用于实时音频、视频和数据通信，它允许在浏览器之间建立点对点连接，并通过这些连接发送数据。这使得WebRTC在视频会议和在线游戏中非常有用。
优点：
点对点通信，直接在浏览器之间建立连接。 实时通信，适合需要实时音视频通信的场景。 安全，使用加密协议保护通信。
缺点：
复杂性高，API 复杂，涉及多种协议和复杂的网络协商。 网络依赖，性能和稳定性依赖于网络条件。
示例代码：
const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const peerConnection = new RTCPeerConnection(configuration);
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
const videoElement = document.querySelector('video');
videoElement.srcObject = stream;
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
})
.catch(error => console.error('Error accessing media devices.', error));
8. WebTransport：新兴的高性能通信协议
WebTransport是一种新兴的 API，它基于 HTTP/3 提供了一个在 Web 客户端和服务器之间进行双向通信的机制。它支持多路复用、流控制，并提供了端到端的加密。
优点：
基于 HTTP/3，使用 UDP 作为底层传输协议，减少连接延迟。 多路复用，允许在同一连接上并行发送多个消息。 流控制，避免数据过快发送导致接收方处理不过来。
缺点：
仍处于实验阶段，不是所有浏览器都支持。
示例代码：
// 建立一个WebTransport连接
const url = 'https://example.com';
const transport = new WebTransport(url);
// 等待连接打开
await transport.ready;
// 创建一个流来发送数据
const stream = await transport.createStream();
// 通过流发送数据
const writer = stream.writable.getWriter();
await writer.write(new TextEncoder().encode('Hello, server!'));
// 关闭流
await writer.close();
// 监听从服务器接收的数据
const reader = stream.readable.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log(new TextDecoder().decode(value));
}
// 关闭连接
await transport.close();
结语
前端开发的世界不断进步，我们有了越来越多的工具和 API 来处理与服务器的通信。
了解这些请求方式，可以帮助我们更好地选择合适的工具来解决具体问题。无论是处理简单的数据获取，还是构建复杂的实时通信应用，前端开发者的武器库中都有合适的工具。
涨知识了吗？快去试试这些不同的请求方式，让你的前端应用更加强大吧！
写在最后
公众号：前端开发爱好者专注分享web前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞👍 或者 ➕关注都是对我最大的支持。
欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。
添加好友备注【进阶学习】拉你进技术交流群
关注公众号后，在首页：
回复 面试题，获取最新大厂面试资料。 回复 简历，获取 3200 套 简历模板。 回复 React 实战，获取 React 最新实战教程。 回复 Vue 实战，获取 Vue 最新实战教程。 回复 ts，获取 TypeScript 精讲课程。 回复 vite，获取 Vite 精讲课程。 回复 uniapp，获取 uniapp 精讲课程。 回复 js 书籍，获取 js 进阶 必看书籍。 回复 Node，获取 Nodejs+koa2 实战教程。 回复 数据结构算法，获取数据结构算法教程。 回复 架构师，获取 架构师学习资源教程。 更多教程资源应有尽有，欢迎 关注获取。
