现代Web开发中，JavaScript通过fetch或axios与服务器交换数据，实现动态交互。fetch是浏览器原生API，语法简洁，基于Promise，支持自定义请求方法、头信息和发送JSON数据，适用于大多数场景。例如：fetch('/api/data')获取数据时需检查响应状态并解析JSON；发送POST请求时配置method、headers及stringify后的body。axios作为第三方库，功能更强大，支持自动转换、拦截器和取消请求，兼容性好且默认携带cookie，适合复杂项目。跨域问题由同源策略引起，需后端设置Access-Control-Allow-Origin头部，或开发时通过代理（如Vue/React的proxy配置）避免。数据传输常用JSON格式，发送时设Content-Type为application/json并序列化对象，接收时解析为JSON；表单或文件上传使用FormData，GET参数通过URL拼接或URLSearchParams构造。正确选择工具并遵循规范可高效完成前后端通信。
在现代Web开发中，JavaScript负责与服务器交换数据，实现动态内容加载和用户交互。网络请求和数据传输是前端与后端协作的核心环节。通过JavaScript发起HTTP请求，获取或发送数据，常见格式为JSON。以下介绍几种主流方式和注意事项。
使用 fetch 发起网络请求
fetch 是现代浏览器原生支持的API，用于发送网络请求，返回Promise对象，语法简洁，推荐在大多数场景中使用。
基本用法如下：
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error('请求失败');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('错误:', error);
});
支持配置选项，例如指定请求方法、添加请求头、发送数据：
立即学习“Java免费学习笔记（深入）”；
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: '张三', age: 25 })
})
.then(res => res.json())
.then(data => console.log(data));
使用 axios 进行数据传输
axios 是一个第三方库，功能比 fetch 更强大，支持拦截器、自动转换JSON、取消请求等，适合复杂项目。
安装后使用：
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
<p>axios.post('/api/submit', {
name: '李四',
age: 30
})
.then(res => console.log(res.data));
</font>优点包括跨浏览器兼容性好、默认携带cookie、请求和响应可拦截。
处理跨域问题（CORS）
当前端页面与API不在同一域名下时，会触发浏览器的同源策略限制。需后端设置正确的CORS头，如：
Access-Control-Allow-Origin: *开发阶段可通过代理解决，例如在Vue或React项目中配置devServer.proxy，将/api请求代理到目标服务器，避免跨域报错。
数据格式与编码
前后端传输数据通常使用JSON格式。发送时需确保Content-Type为application/json，并使用JSON.stringify序列化对象。接收时解析response为JSON对象。
注意特殊情况：
- 表单数据提交可使用 FormData 对象，Content-Type 会自动设为 multipart/form-data
- 文件上传依赖 FormData，不可直接用JSON
- GET 请求参数应拼接在URL上，或使用 URLSearchParams 构造
基本上就这些。选择合适的方法，配合后端接口规范，就能高效完成数据传输任务。不复杂但容易忽略细节。
