一篇搞定前端所有涉及的请求方式
文章目录
前言一、DOM标签请求二、Ajax（XMLHttpRequest）2.1 解决问题2.2 实现步骤：2.3 ajax的缺点
三、Axios3.1 解决问题3.2 优缺点
四、Fetch API4.1 解决问题4.2 优缺点
五、webSoket / SSE / 轮询
前言
一篇关于所有请求方式的文章，包括了标签式、Ajax、Fetch API、Axios、WebSocket、SSE、轮询，让你看完一篇文本就弄懂区别和使用场景。 关于 Promise、async/await 可以参考对应链接文档 关于 webSoket / SSE / 轮询 可以参考对应链接文档 仅考虑能否发起请求，不从请求协议等其他角度考虑，
方式优点缺点Ajax解决异步请求问题、老浏览器的支持 、可根具需求完成更细化的操作配置内容较多，上手难度相对较高 、有回调地狱问题、没有拦截器、不能取消请求、不能自动处理等Axios解决ajax的核心为问题、如拦截器、并发请求、取消请求、node环境的支持、封装XHR并扩展Promise较大的包体积，需要依赖第三方库，重复请求相同几口需手动缓存Fetch API现代浏览器已原生支持、流式输出没有拦截器、需手动处理错误WebSocket双工通信、流式输出性能问题、重连机制SSE服务器推送、流式输出重连机制
一、DOM标签请求
通过HTML标签如< a>、< img>、< script> 等直接发起请求，常用于静态资源加载/下载或简单跳转。 1、< a > 跳转页面 / 下载资源 默认行为会刷新页面，可通过 JavaScript 阻止（如 e.preventDefault()） 2、< img > 加载图片 浏览器解析到该标签时会自动发起 GET 请求, 支持懒加载（loading="lazy"）优化性能。 3、< script > 加载并执行 JavaScript 文件，自动发起 GET 请求。默认会阻塞页面渲染，可用 async 或 defer 控制加载行为
二、Ajax（XMLHttpRequest）
首个被广泛采用的标准化方案，首次提供原生JavaScript API实现后台HTTP请求。 维护老项目首选方案
2.1 解决问题
1、无需页面刷新更新内容，传统Web应用每次操作都需要重新加载整个页面，Ajax允许只更新页面局部内容，提升用户体验
2、异步数据交互，浏览器可以在后台与服务器通信，用户无需等待。避免用户操作被阻塞
3、降低服务器负载，只需传输最小必要数据，而非整个页面；减少带宽消耗；实现更丰富的交互
4、支持实时搜索、表单验证、无限滚动等功能，创建接近桌面应用的体验
2.2 实现步骤：
1、初始化XMLHttpRequest对象。 2、open()方法指定请求类型、URL和异步标志。 3、setRequestHeader()设置请求头（如Content-Type）。 4、通过onreadystatechange监听请求状态，readyState=4表示完成，status=200表示成功。 5、send()发送请求体数据（POST需传参，GET可传null。
// 1. 创建XHR对象
let xhr = new XMLHttpRequest();
// 2. 配置请求（POST方法，异步）
xhr.open('POST', 'https://api.example.com/submit', true);
// 3. 设置请求头（如JSON格式）
xhr.setRequestHeader('Content-Type', 'application/json');
// 4. 监听状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('成功:', JSON.parse(xhr.responseText));
} else {
console.error('错误:', xhr.statusText);
}
}
};
// 5. 发送JSON数据
xhr.send(JSON.stringify({ name: '张三', age: 25 }));
2.3 ajax的缺点
没有拦截器、不支持取消请求、需手动转JSON和处理错误状态
1、破坏浏览器历史机制
Ajax更新内容不改变URL，导致浏览器后退/前进按钮失效，用户无法回溯操作状态。解决方案：使用HTML5 history.pushState() 管理历史记录。
2、SEO不友好
动态加载的内容不被搜索引擎爬虫解析（如京东商品页案例），影响页面索引和排名。需结合服务端渲染（SSR）或预渲染技术优化。
3、大文件传输瓶颈
原生XHR对超过10MB的文件支持差，易超时或中断。需改用FormData对象分段上传，或调整服务器配置
4、原生API复杂冗长
需手动创建XMLHttpRequest对象，错误处理回调嵌套易导致“回调地狱”。
三、Axios
3.1 解决问题
1、Promise 封装 原生 XHR 采用回调嵌套模式，易引发“回调地狱”；axios 基于 Promise 提供链式调用（.then()/.catch()），支持 async/await 语法，实现异步逻辑线性化 2、统一错误处理机制 通过 catch 集中捕获网络异常、超时、状态码错误（如 401/500），避免原生 XHR 需手动检测 readyState 和 status 的复杂逻辑
axios.get('/api/user?id=123')
.then(response => {
console.log(response.data); // 成功响应数据
})
.catch(error => {
console.error('请求失败:', error.message); // 错误处理
});
// 请求拦截
axios.interceptors.request.use(config => {
config.headers.Authorization = localStorage.getItem('token');
return config;
});
// 响应拦截
axios.interceptors.response.use(
response => response.data, // 仅返回data字段
error => Promise.reject(error.response?.data?.message)
);
// 并发请求
const getUser = axios.get('/user/1');
const getPosts = axios.get('/posts?userId=1');
axios.all([getUser, getPosts])
.then(axios.spread((userRes, postsRes) => {
console.log('用户数据:', userRes.data);
console.log('文章列表:', postsRes.data);
}));
3.2 优缺点
1、优点
1、基于promise提供链式调用，解决回调地狱问题
2、统一错误处理，通过catch集中捕获请求错误
3、拦截器机制，全局修改请求/响应数据
4、并发请求 axios.all()
5、取消请求需求 CancelToken / AbortController
6、全平台支持，在浏览器和node环境中通用
2、缺点
1、依赖第三方库，包体积较大，现代浏览器原生支持fetch api
四、Fetch API
4.1 解决问题
现代浏览器原生支持，减少包体积；配置项简化，支持流式数据输出
fetch('https://api.example.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'New Post', content: 'Hello World' })
})
.then(response => response.json())
.then(data => console.log('Success:', data));
// AbortController中断请求
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000); // 5秒超时
fetch('https://api.example.com/slow', {
signal: controller.signal
}).catch(e => console.log('Aborted:', e));
// FormData传输二进制文件
const formData = new FormData();
formData.append('file', fileInput.files);
fetch('/upload', {
method: 'POST',
body: formData // 自动设置multipart/form-data
});
//递归处理失败请求：
async function retryFetch(url, retries = 3) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(response.status);
return response.json();
} catch (err) {
return retries > 1 ? retryFetch(url, retries - 1) : Promise.reject(err);
}
}
4.2 优缺点
1、优点
1、现代浏览器原生支持
2、数据流式输出
3、提供Request和Response接口，统一处理头信息、状态码等HTTP元数据，支持流式数据操作
4、通过mode: 'cors'配置显式声明跨域请求
2、缺点
1、无请求取消（需AbortController）需配合AbortController实现中断请求
2、错误处理需手动封装HTTP错误状态（如404/500）不会触发reject，需通过response.ok检查
3、无拦截器机制，需自行封装实现
五、webSoket / SSE / 轮询
关于 webSoket / SSE / 轮询 已在该链接详细阐述，此处不做过多说明