fetch API是现代浏览器提供的原生网络请求接口，基于Promise实现，用来替代传统的XMLHttpRequest，语法更简洁，支持异步操作，能够快速完成各类HTTP请求。它默认返回Promise对象，通过链式调用then和catch就能处理请求结果和异常，不需要复杂的事件监听逻辑。
基本语法与简单GET请求
fetch API最基本的用法只需要传入请求地址，就能发起一个GET请求，返回的结果是一个Promise对象，第一个then回调中拿到的是Response对象，需要进一步解析才能得到具体数据。
// 发起简单的GET请求
fetch('https://api.ipipp.com/data')
.then(response => {
// 判断响应状态是否成功，状态码在200-299之间为成功
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
// 解析响应为JSON格式，返回新的Promise
return response.json();
})
.then(data => {
console.log('请求到的数据：', data);
})
.catch(error => {
console.error('请求出错：', error);
});常用配置参数
fetch的第二个参数可以传入配置对象，用来设置请求方法、请求头、请求体、跨域模式等内容，满足不同场景的请求需求。
| 参数名 | 说明 | 默认值 |
|---|---|---|
| method | 请求方法，如GET、POST、PUT、DELETE等 | GET |
| headers | 请求头配置，通常是对象形式 | 空对象 |
| body | 请求体，GET请求不需要设置，POST等请求可传入JSON字符串、FormData等 | null |
| mode | 跨域模式，可选cors、no-cors、same-origin | cors |
POST请求示例
发起POST请求时，需要设置method为POST，同时在headers中指定内容类型，body中传入对应的请求数据，比如提交JSON格式的数据。
// 发起POST请求提交JSON数据
fetch('https://api.ipipp.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: '测试用户',
age: 25
})
})
.then(response => {
if (!response.ok) {
throw new Error('提交失败');
}
return response.json();
})
.then(result => {
console.log('提交结果：', result);
})
.catch(error => {
console.error('提交出错：', error);
});其他常见请求场景
提交FormData数据
如果需要提交表单数据，可以直接使用FormData对象作为body，不需要手动设置Content-Type，浏览器会自动识别。
// 提交FormData数据
const formData = new FormData();
formData.append('username', 'test');
formData.append('password', '123456');
fetch('https://api.ipipp.com/login', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log('登录结果：', data))
.catch(error => console.error('登录出错：', error));处理其他响应类型
除了JSON格式，Response对象还提供了其他解析方法，比如解析文本用response.text()，解析Blob对象用response.blob()，可以用来处理图片、文件等类型的响应。
// 获取图片并转换为Blob
fetch('https://picsum.photos/200/300')
.then(response => response.blob())
.then(blob => {
const imgUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = imgUrl;
document.body.appendChild(img);
});注意事项
- fetch只有在网络故障时才会触发catch回调，HTTP状态码为404、500等错误状态时不会进入catch，需要手动判断response.ok或者response.status。
- 跨域请求需要服务端配置对应的CORS响应头，否则请求会被浏览器拦截。
- 不支持取消请求的原生方式，如果需要取消可以结合AbortController使用，不过需要注意浏览器兼容性。
- 请求HTTPS地址时，如果证书无效，fetch请求会直接失败，需要在合适的环境处理这类情况。
fetch_APIJavaScript异步请求HTTP请求Promise修改时间：2026-06-04 03:33:50