fetch api 发送最基础 get 请求并拉取 json 数据需三步：调用 fetch、用 response.json() 解析、检查 response.ok 并处理数据或错误；http 错误需手动判断，推荐 async/await 写法。
Fetch API 是现代 JavaScript 中发送 HTTP 请求的标准方式，比传统的 XMLHttpRequest 更简洁、更易用，且原生支持 Promise，便于配合 async/await 使用。
基本用法：发起 GET 请求
最简单的场景是获取数据（如 JSON 接口）：
- 调用 fetch(url) 返回一个 Promise，解析响应需链式调用 .then() 或用 await
- fetch 默认只返回 Response 对象，**不会自动解析响应体**，需手动调用 .json()、.text() 或 .blob() 等方法
- 注意：即使状态码是 404 或 500，fetch 也不会拒绝 Promise，需手动检查 response.ok 或 response.status
示例：
async function getUser() {
try {
const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const user = await res.json();
console.log(user.name); // "Leanne Graham"
} catch (err) {
console.error('请求失败:', err.message);
}
}
发送 POST 请求并提交 JSON 数据
向服务器提交数据时，需设置请求头和请求体：
- 设置 headers 为 { 'Content-Type': 'application/json' }
- 使用 JSON.stringify() 将 JS 对象转为字符串作为 body
- method 字段必须显式指定为 'POST'
示例：
async function createUser(userData) {
const res = await fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(userData)
});
return res.json();
}
createUser({ name: 'Alice', email: 'alice@example.com' })
.then(data => console.log('创建成功:', data))
.catch(err => console.error(err));
处理不同类型的响应内容
根据接口返回的数据类型选择合适的解析方法：
- .json() → 解析 JSON 格式（最常见），失败时抛出 SyntaxError
- .text() → 获取纯文本（如 HTML、日志、错误信息）
- .blob() → 下载文件或处理二进制内容（如图片、PDF）
- .arrayBuffer() → 用于底层字节操作（如加密、音视频处理）
例如下载图片：
async function downloadImage() {
const res = await fetch('https://via.placeholder.com/150');
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
}
设置超时与取消请求
Fetch 本身不支持超时或取消，但可通过 AbortController 实现：
- 创建控制器：const controller = new AbortController();
- 将 signal 传入 fetch 选项
- 调用 controller.abort() 可主动终止请求（例如用户点击取消按钮）
- 超时可结合 setTimeout 实现
示例（10 秒超时）：
async function fetchWithTimeout(url, timeout = 10000) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
try {
const res = await fetch(url, { signal: controller.signal });
clearTimeout(id);
return res;
} catch (err) {
clearTimeout(id);
if (err.name === 'AbortError') throw new Error('请求超时');
throw err;
}
}
Fetch API 简洁强大，掌握基础用法和常见陷阱就能覆盖大多数前端网络交互场景。关键点在于理解它返回的是 Response 对象、需手动解析、错误需主动判断，再配合 AbortController 和合适的内容解析方法，就能写出健壮的请求逻辑。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
