本文深入解析 JavaScript 中三种主流的网络请求方案：原生 XMLHttpRequest、现代 Fetch API 以及第三方库 Axios。详细对比了它们在语法简洁性、错误处理机制、跨域配置及兼容性方面的差异，并提供了 POST 请求、超时控制、取消请求及表单模拟提交等实际代码示例，帮助开发者根据项目需求选择最佳方案。
在 Web 开发领域，前端与后端服务器之间的数据交互是构建动态应用的核心环节。随着技术的发展，前端请求方案经历了从原生 AJAX 到现代 Fetch API，再到引入 Axios 等第三方库的多次迭代与优化。本文旨在全面解析 JavaScript 中发送网络请求的几种常用方法，协助开发者依据具体业务场景选择最合适的技术方案。
一、原生 AJAX（XMLHttpRequest）
1. 基础用法
XMLHttpRequest（简称 XHR）是浏览器原生支持的异步通信标准，开发者通过实例化该对象并配置相关参数来完成数据交互任务：
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(JSON.parse(xhr.responseText));
}
};
xhr.send();
2. POST 请求示例
当需要发送 JSON 格式的数据时，必须正确设置请求头信息并对参数进行序列化：
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 201) console.log('创建成功');
else console.error('请求失败:', xhr.statusText);
}
};
xhr.send(JSON.stringify({ name: 'Alice', age: 25 }));
3. 优缺点分析
- 优点：具备极佳的浏览器兼容性（支持 IE6 及以上版本），且能够监听文件上传的进度状态（
upload.onprogress） - 缺点：
- 代码实现较为繁琐，需要手动管理请求状态与回调逻辑
- 默认情况下不携带 Cookie 信息，必须显式设置
xhr.withCredentials = true - 处理跨域请求时，必须依赖后端服务器配置
Access-Control-Allow-Credentials响应头
二、Fetch API
1. 基础用法
Fetch API 基于 Promise 对象构建，提供了比 XHR 更为简洁的异步操作接口：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) throw new Error('Network error');
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
2. POST 请求示例
fetch('https://api.example.com/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Bob', age: 30 }),
credentials: 'include' // 携带Cookie
})
.then(response => response.json())
.then(data => console.log(data))
.catch(console.error);
3. 高级特性
- 超时控制：可以通过
AbortController机制来实现请求的取消与超时处理
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
fetch('https://api.example.com/data', { signal: controller.signal })
.catch(err => {
if (err.name === 'AbortError') console.log('请求超时');
});
- 流式响应：在处理大型文件下载时，可以使用
response.body.getReader()进行分块读取
4. 优缺点分析
- 优点：语法结构简洁，原生支持流式数据处理，且天然支持 Promise 的链式调用
- 缺点：
- 默认情况下不会将 HTTP 错误状态码（如 404、500）视为拒绝状态，需要手动检查
response.ok - 跨域请求同样需要后端服务器配置
Access-Control-Allow-Origin响应头 - 浏览器兼容性方面，Internet Explorer 不支持该 API，需引入 polyfill 补丁
- 默认情况下不会将 HTTP 错误状态码（如 404、500）视为拒绝状态，需要手动检查
三、第三方库方案
1. Axios
核心特性
- 自动进行 JSON 数据的转换与解析
- 支持请求与响应的拦截器功能
- 提供取消请求的功能（
CancelToken） - 内置客户端防御 XSRF（跨站请求伪造）机制
示例代码
axios.post('https://api.example.com/submit', { name: 'Charlie' })
.then(response => console.log(response.data))
.catch(error => {
if (error.response) {
console.error('服务器错误:', error.response.status);
} else {
console.error('网络错误:', error.message);
}
});
2. jQuery AJAX
传统写法
$.ajax({
url: 'https://api.example.com/data',
type: 'GET',
dataType: 'json',
success: function(data) { console.log(data); },
error: function(xhr, status, error) { console.error(error); }
});
简写形式
$.get('https://api.example.com/data', function(data) {
console.log(data);
});
四、特殊场景方案
1. 表单模拟提交（PUT/DELETE）
可以通过创建隐藏的 HTML 表单来实现对非 GET 或 POST 方法的提交：
function submitWithMethod(url, method, data) {
const form = document.createElement('form');
form.method = 'POST'; // 表单原生不支持PUT/DELETE
form.action = url;
// 添加_method字段模拟真实HTTP方法
const methodInput = document.createElement('input');
methodInput.type = 'hidden';
methodInput.name = '_method';
methodInput.value = method;
form.appendChild(methodInput);
// 添加数据字段
Object.entries(data).forEach(([key, value]) => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = value;
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
}
// 使用示例
submitWithMethod('/orders/123', 'PUT', { status: 'shipped' });
2. 文件上传进度监控
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/upload', true);
// 上传进度事件
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(`上传进度: ${percent}%`);
}
};
xhr.send(new FormData(document.getElementById('uploadForm')));五、选择建议
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| 现代浏览器开发 | Fetch API | 语法简洁，支持流式处理，与Promise生态无缝集成 |
| 需要兼容IE | Axios | 自动降级处理，提供统一的错误处理机制 |
| 复杂业务逻辑 | Axios拦截器 | 通过拦截器统一处理认证、日志、错误重试等横切关注点 |
| 大文件上传 | XHR | 支持进度监控，可配合分片上传策略 |
| 表单重定向提交 | 隐藏表单法 | 浏览器自动处理Cookie，后端可识别_method字段模拟PUT/DELETE |
六、最佳实践
- 错误处理：务必始终检查 HTTP 状态码，不应仅依赖 catch 块来捕获所有潜在错误
- 安全防护：
- 涉及敏感数据传输的操作必须使用 HTTPS 协议
- 跨域请求需正确配置 CORS 响应头
- 关键操作应添加 CSRF Token 以增强安全性
- 性能优化：
- 合理使用缓存机制（
Cache-Control）以提升性能 - 对于大文件传输，建议采用分片上传策略
- 对于需要频繁交互的场景，可考虑使用 WebSocket 或 Server-Sent Events
- 合理使用缓存机制（
- 调试技巧：
- 利用浏览器 Network 面板验证请求头与请求体内容
- 通过
console.log(response)检查原始响应结构以进行调试 - 在复杂业务场景下，建议先使用 Postman 等工具验证接口可用性
结语
JavaScript 请求方案的选择应基于项目具体需求、团队技术栈熟悉度以及目标浏览器的兼容性要求。现代 Web 项目推荐以 Fetch API 作为主要通信手段，在涉及复杂业务逻辑时引入 Axios 以增强功能，同时保持对 XHR 的理解以便维护遗留代码。无论采用哪种方案，始终应牢记安全性、可维护性和性能这三个核心原则。
以上就是 JS 发送请求的常用方法详解的详细内容，更多关于 JS 发送请求方法的资料请关注本站其它相关文章！