当前位置：首页 > news >正文

fetch`的语法规则及常见用法

news 2025/7/11 6:27:28

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", // 携带 Cookie
    cache: "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))])`