Fetch API 是浏览器内置的现代网络请求接口,基于 Promise,语法简洁,支持多种响应类型;注意其仅在网络失败时拒绝 Promise,HTTP 错误需手动检查 response.ok 或 status。

Fetch API 是浏览器内置的、用于发起网络请求的现代 JavaScript 接口,用来替代传统的 XMLHttpRequest。它基于 Promise,语法更简洁,逻辑更清晰,支持 JSON、文本、图片、流等多种响应类型。
Fetch 的基本用法
最简单的 GET 请求只需一行代码:
fetch('https://api.example.com/data') 返回一个 Promise,成功时解析为 Response 对象。
注意:fetch 只在**网络失败(如断网、DNS 错误)时拒绝 Promise**;HTTP 错误状态(如 404、500)仍会进入 then,需手动检查 response.ok 或 response.status。
立即学习“Java免费学习笔记(深入)”;
需要创建、读取、编辑或处理 Word 文档(.docx / .dotx)时使用。触发词:'Word'、'word 文档'、'.docx'、'生成报告'、'制作合同/简历/方案/说明书'、'提取 word 内容'、'在文档里查找替换'、'给文档加页眉页脚/目录/表格'。也用于把任意内容排版成一份正式的 Word 文件。不要用它处理 PDF、Excel 或无关编程任务。中文创作场景尤其适合:小说大纲稿、投稿文档、合同、简历、工作总结。
- 用
.then(res => res.json())解析 JSON 响应 - 用
.then(res => res.text())获取纯文本 - 用
.catch(err => console.error(err))捕获网络异常
发送 POST 请求并传参
发送表单数据或 JSON 数据时,需配置 options 参数:
fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'admin', password: '123' })
})
-
method默认是GET,POST/PUT/DELETE 需显式声明 -
headers控制请求头,发送 JSON 时通常要设Content-Type -
body必须是字符串、FormData、Blob或URLSearchParams,不能直接传对象
处理错误与加载状态
实际项目中建议封装一层,统一处理常见逻辑:
- 检查
response.ok判断 HTTP 状态是否在 200–299 范围 - 对非 2xx 响应抛出自定义错误,便于
catch统一处理 - 添加超时控制(Fetch 本身不支持 timeout,可用
AbortController实现) - 配合 loading 状态变量,在 UI 上显示“加载中”或禁用按钮
与 async/await 结合更易读
用 async/await 替代链式 then,让异步代码像同步一样直观:
async function getUser() {
try {
const res = await fetch('/api/user');
if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
const data = await res.json();
return data;
} catch (err) {
console.error('获取用户失败:', err);
}
}
这样写逻辑清晰,错误处理集中,也方便复用和测试。


















