Fetch API 提供简洁、基于 Promise 的网络请求方式，支持 GET/POST 请求及 JSON 解析；需手动检查 response.ok 判断 HTTP 错误，结合 async/await 可提升代码可读性。
JavaScript 的 Fetch API 提供了一种现代化、简洁的方式来发起网络请求。相比传统的 XMLHttpRequest，它更易读、支持 Promise，并且原生集成了解析 JSON 等常用操作。下面介绍它的基本用法和常见场景。
基本语法与 GET 请求
Fetch 最简单的用法是发起一个 GET 请求，获取远程数据。
调用 fetch() 会返回一个 Promise，响应结果需要通过 .json() 方法进一步解析。
示例：
fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('请求失败'); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('错误:', error); });
发送 POST 请求
向服务器提交数据时，需配置请求选项，如方法、请求头和请求体。
立即学习“Java免费学习笔记（深入）”；
注意设置 Content-Type 为 application/json，并将数据用 JSON.stringify() 转换。
示例：
fetch('https://api.example.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: '张三', age: 25 })}).then(response => response.json()).then(result => { console.log(result);}).catch(error => { console.error('错误:', error);});
处理请求状态与错误
Fetch 只有在网络错误时才会触发 catch，HTTP 错误状态（如 404、500）不会自动 reject。必须手动检查 response.ok 或状态码。
response.ok：布尔值，表示状态码是否在 200-299 之间 response.status：返回具体的 HTTP 状态码 可结合这些判断来抛出错误，确保异常能被后续 catch 捕获
使用 async/await 简化写法
结合 async 和 await，可以让异步代码看起来更像同步，逻辑更清晰。
示例：
async function getData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error(`HTTP 错误! 状态: ${response.status}`); } const data = await response.json(); console.log(data); } catch (error) { console.error('请求出错:', error); }}getData();
基本上就这些。Fetch API 简洁强大，适合大多数前端请求场景，配合 async/await 使用体验更佳。不复杂但容易忽略的是对响应状态的手动判断。
以上就是JavaScriptFetchAPI使用_JavaScript现代请求方式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540080.html
微信扫一扫 
支付宝扫一扫 
