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))])