在前端开发中，和后端服务进行数据交互是常见需求，javascript提供了多种方式发送HTTP请求，其中fetch API是浏览器原生支持的主流方案，相比传统的XMLHttpRequest，它的语法更简洁，基于Promise的设计也让异步操作的处理更清晰。
fetch API的基本语法
fetch API的核心是一个全局函数fetch()，它接收一个必填参数：请求的URL，还可以接收一个可选的配置对象，用来设置请求方法、请求头、请求体等内容。函数调用后会返回一个Promise对象，这个Promise在请求成功时解析为Response对象，请求失败时会被拒绝。
最基本的GET请求写法如下：
// 发送GET请求到指定接口
fetch('https://ipipp.com/api/user/list')
.then(response => {
// 处理响应，这里先返回response的json解析结果
return response.json();
})
.then(data => {
// 拿到解析后的数据
console.log('请求到的数据：', data);
})
.catch(error => {
// 捕获请求过程中的错误
console.error('请求失败：', error);
});
常用配置参数说明
fetch的第二个可选配置对象支持多个属性，常用的包括：
- method：请求方法，比如GET、POST、PUT、DELETE等，默认是GET
- headers：请求头配置，用来设置Content-Type、认证信息等
- body：请求体，一般用于POST、PUT等需要传递数据的请求，需要是字符串或者FormData等类型
- mode：请求模式，比如cors、no-cors、same-origin，默认是cors
发送POST请求的示例
发送POST请求时，需要配置method为POST，同时设置对应的headers和body，比如提交JSON格式的数据：
// 发送POST请求提交JSON数据
fetch('https://ipipp.com/api/user/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: '张三',
age: 25,
email: 'test@ipipp.com'
})
})
.then(response => {
// 检查响应状态是否正常，状态码在200-299之间为正常
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
return response.json();
})
.then(data => {
console.log('添加用户成功：', data);
})
.catch(error => {
console.error('操作失败：', error);
});
响应处理注意事项
fetch的Response对象提供了多个方法来解析响应数据，常用的有：
json()：把响应体解析为JSON对象，返回一个Promisetext()：把响应体解析为文本字符串，返回一个Promiseblob()：把响应体解析为Blob对象，适合处理文件、图片等二进制数据arrayBuffer()：把响应体解析为ArrayBuffer，适合处理二进制数据
需要注意的是，fetch只有在网络请求失败时才会 reject Promise，如果服务器返回404、500等状态码，Promise依然是 resolved 状态，所以需要手动检查response.ok属性来判断请求是否真正成功。
结合async/await使用
因为fetch基于Promise，所以也可以结合async/await语法让代码更简洁，避免回调嵌套：
// 用async/await封装fetch请求
async function getUserList() {
try {
const response = await fetch('https://ipipp.com/api/user/list');
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
const data = await response.json();
console.log('用户列表：', data);
return data;
} catch (error) {
console.error('获取用户列表失败：', error);
}
}
// 调用函数
getUserList();
常见问题说明
使用fetch API时需要注意几个常见问题：
- fetch默认不会携带Cookie，如果需要携带，需要设置配置对象的
credentials属性为include或者same-origin - 请求头中的
Content-Type需要和请求体的格式匹配，比如发送JSON数据要设置为application/json，发送表单数据可以设置为application/x-www-form-urlencoded或者使用FormData不需要手动设置该头 - 跨域请求需要服务端配置对应的CORS响应头，否则请求会被浏览器拦截
fetch_APIjavascriptHTTP请求异步请求修改时间：2026-06-24 11:18:30