fetch请求如何拿到结果
时间: 2025-08-28 11:31:03 AIGC 浏览: 14
### 使用 Fetch API 获取响应数据
Fetch API 是一种现代的解决方案,用于发起网络请求并处理响应。它提供了更简洁和强大的接口来替代传统的 `XMLHttpRequest`。
以下是通过 Fetch API 获取 JSON 数据的一个完整示例:
```javascript
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); // 处理 HTTP 错误状态码 [^2]
}
return response.json(); // 将响应体解析为 JSON 格式 [^1]
})
.then(data => {
const container = document.getElementById("data-container");
data.forEach(item => { // 遍历返回的数据项
const element = document.createElement("p");
element.textContent = item.name;
container.appendChild(element);
});
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error); // 捕获并记录错误
});
```
#### 解析与说明
上述代码展示了如何利用 Fetch API 来获取远程资源中的 JSON 数据,并将其显示到网页上的指定容器中。
- **第一步**: 发起 GET 请求至目标 URL (`https://api.example.com/data`) 并等待服务器回应。
- **第二步**: 如果响应的状态不是成功 (即 `response.ok === false`),则抛出异常以便后续捕获 。
- **第三步**: 响应被转换成 JSON 对象形式 。
- **第四步**: 成功接收到数据后,在 DOM 中动态创建节点并将数据显示出来 。
- **第五步**: 若任何阶段发生错误,则进入 `.catch()` 分支执行相应的错误处理逻辑 。
另外需要注意的是,`fetch()` 函数本身不会自动带上跨域凭证(如 Cookies),如果需要支持 CORS 的话可能还需要额外配置参数 `{credentials: 'include'}` 等选项 [^4]。
### 注意事项
当调用外部服务时,请始终验证其安全性以及遵循同源策略等相关规定;同时也要考虑到浏览器兼容性和性能优化等问题。
阅读全文
相关推荐



















