fetch的语法规则及常见用法
fetch() 是 JavaScript 用于发送 HTTP 请求的内置 API，功能强大，语法简洁。以下是 fetch 的语法规则及常见用法。
1. fetch 基本语法
fetch(url, options).then(response => response.json()) // 解析 JSON 响应体.then(data => console.log(data)) // 处理数据.catch(error => console.error("Error:", error)); // 处理错误
url：请求的地址（必填）。options：可选的请求配置对象（如method、headers、body等）。
2. fetch 请求方法
（1）GET 请求
GET 请求用于获取数据，通常不需要 body：
fetch("https://api.example.com/data").then(response => response.json()).then(data => console.log(data)).catch(error => console.error("Error:", error));
或带参数：
const params = new URLSearchParams({ id: 123, name: "Tom" });
fetch(`https://api.example.com/data?${params}`).then(response => response.json()).then(data => console.log(data));
（2）POST 请求
POST 用于发送数据，通常需要 body 和 headers：
fetch("https://api.example.com/data", {method: "POST",headers: { "Content-Type": "application/json" },body: JSON.stringify({ id: 123, name: "Tom" })
})
.then(response => response.json())
.then(data => console.log(data));
（3）PUT / PATCH 请求（更新数据）
PUT：完整更新资源PATCH：部分更新资源
fetch("https://api.example.com/user/123", {method: "PUT",headers: { "Content-Type": "application/json" },body: JSON.stringify({ name: "Updated Name" })
})
.then(response => response.json())
.then(data => console.log(data));
（4）DELETE 请求
DELETE 请求用于删除数据，通常不需要 body：
fetch("https://api.example.com/user/123", {method: "DELETE"
})
.then(response => response.json())
.then(data => console.log(data));
3. fetch 选项（options）详解
fetch(url, {method: "POST", // 请求方法headers: { "Content-Type": "application/json" }, // 请求头body: JSON.stringify({ key: "value" }), // 请求体mode: "cors", // 跨域请求模式credentials: "include", // 携带 Cookiecache: "no-cache", // 缓存模式redirect: "follow" // 自动跟随重定向
})
常用 options 配置
| 配置项 | 说明 |
|---|---|
method | 请求方法（GET、POST、PUT、DELETE、PATCH等） |
headers | 请求头，例如 Content-Type、Authorization 等 |
body | 发送的请求数据，通常为 JSON 或 FormData |
mode | cors（跨域），same-origin（同源） |
credentials | include（携带 Cookie），omit（不带 Cookie） |
cache | no-cache（不缓存），reload（强制刷新） |
redirect | follow（自动重定向），error（遇到重定向报错） |
4. 处理响应（Response 对象）
fetch 返回的是一个 Promise，解析后得到 Response 对象：
fetch("https://api.example.com/data").then(response => {console.log(response.status); // HTTP 状态码console.log(response.headers); // 响应头return response.json(); // 解析 JSON}).then(data => console.log(data));
Response 方法
| 方法 | 作用 |
|---|---|
response.text() | 解析为文本格式 |
response.json() | 解析为 JSON |
response.blob() | 解析为 Blob（二进制数据，如图片） |
response.arrayBuffer() | 解析为 ArrayBuffer |
response.formData() | 解析为 FormData |
5. 处理错误
fetch 只有在网络错误时才会进入 catch，如果服务器返回 4xx 或 5xx 需要手动抛出异常：
fetch("https://api.example.com/data").then(response => {if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}return response.json();}).then(data => console.log(data)).catch(error => console.error("Fetch error:", error));
6. async/await 方式
fetch 也可以和 async/await 搭配使用，使代码更清晰：
async function fetchData() {try {const response = await fetch("https://api.example.com/data");if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}const data = await response.json();console.log(data);} catch (error) {console.error("Fetch error:", error);}
}fetchData();
7. 进阶用法
（1）携带 Cookie（跨域请求）
如果请求涉及跨域并需要携带 Cookie，必须设置 credentials：
fetch("https://api.example.com/data", {method: "GET",credentials: "include" // 允许携带 Cookie
});
（2）上传文件
使用 FormData 进行文件上传：
const formData = new FormData();
formData.append("file", fileInput.files[0]);fetch("https://api.example.com/upload", {method: "POST",body: formData
})
.then(response => response.json())
.then(data => console.log(data));
（3）超时处理
fetch 本身不支持超时，需要用 Promise.race() 处理：
function fetchWithTimeout(url, timeout = 5000) {return Promise.race([fetch(url),new Promise((_, reject) =>setTimeout(() => reject(new Error("Request Timeout")), timeout))]);
}fetchWithTimeout("https://api.example.com/data").then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));
8. 总结
| 用法 | 代码示例 |
|---|---|
| 基本 GET | fetch(url).then(res => res.json()).then(console.log); |
| POST 发送 JSON | fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }) |
| 处理错误 | fetch(url).then(res => { if (!res.ok) throw new Error(res.status); return res.json(); }) |
| 携带 Cookie | fetch(url, { credentials: "include" }) |
| 上传文件 | fetch(url, { method: "POST", body: formData }) |
| 超时处理 | Promise.race([fetch(url), new Promise((_, r) => setTimeout(() => r(new Error("Timeout")), 5000))]) |