异步编程
Fetch API
掌握 fetch 请求、响应处理、请求配置
Fetch API
Fetch 是现代浏览器发起 HTTP 请求的标准方式，替代了老旧的 XMLHttpRequest。
学完本章你将： 掌握 GET/POST 请求、请求配置、响应处理。
基本用法
javascript
// GET 请求
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error("请求失败：", err));
// async/await 版本
async function getPost(id) {
let response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
}请求配置
javascript
// POST 请求
async function createPost(data) {
let response = await fetch("/api/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer token123",
},
body: JSON.stringify(data),
});
return response.json();
}
createPost({ title: "Hello", body: "World" });
// FormData 上传
async function uploadFile(file) {
let formData = new FormData();
formData.append("file", file);
formData.append("name", file.name);
let response = await fetch("/api/upload", {
method: "POST",
body: formData, // 自动设置 Content-Type 为 multipart/form-data
});
return response.json();
}响应处理
javascript
async function handleResponse() {
let response = await fetch("/api/data");
console.log(response.status); // 200
console.log(response.ok); // true（200-299）
console.log(response.headers.get("content-type"));
// 不同格式
let json = await response.json(); // JSON
let text = await response.text(); // 文本
let blob = await response.blob(); // 二进制（图片等）
let formData = await response.formData(); // FormData
let buffer = await response.arrayBuffer(); // 原始二进制
// 流式读取
let reader = response.body.getReader();
while (true) {
let { done, value } = await reader.read();
if (done) break;
console.log("收到数据块：", value.length);
}
}中断请求
javascript
// AbortController
async function fetchWithAbort() {
let controller = new AbortController();
// 5秒后中断
setTimeout(() => controller.abort(), 5000);
try {
let response = await fetch("/api/slow", {
signal: controller.signal,
});
return response.json();
} catch (err) {
if (err.name === "AbortError") {
console.log("请求已取消");
}
}
}