fetch如何使用

<think>我们参考了用户提供的引用内容，其中引用[1]是一篇关于前端请求的全面解析文章，介绍了AJAX、Axios和Fetch的使用。引用[2]展示了如何拦截fetch请求。引用[3]提到了Fetch方法的封装和业务实践。引用[4]展示了fetch请求中处理arrayBuffer的示例。 根据用户的问题，他想了解在前端如何使用fetch对接后端接口。因此，我们将重点介绍fetch的基本用法、常见配置、错误处理以及实际应用中的封装建议。 以下为回答结构： 1. **fetch基本用法**：介绍GET和POST请求的基本写法。 2. **处理响应**：如何解析不同类型的响应（如JSON、文本、二进制数据）。 3. **错误处理**：fetch不会对HTTP错误状态（如404、500）抛出异常，需要手动处理。 4. **请求配置**：设置请求头、跨域请求、超时控制等。 5. **实际封装建议**：根据引用[3]和[4]，介绍如何封装fetch以应对业务需求。 6. **与Axios的简单对比**：根据引用[1]，简要说明fetch与Axios的差异，帮助用户选择。 我们还会在最后生成相关问题。 注意：在代码示例中，我们会使用ES6语法，并尽量给出注释说明。</think>### 前端使用 Fetch 对接后端接口的完整指南 Fetch API 是现代浏览器原生支持的 HTTP 请求工具，相比传统 AJAX 更简洁强大。以下是核心用法和实践建议（结合引用内容）： --- #### 1. **基本 GET 请求（对接 Python 后端）** ```javascript // 请求 Python 后端的 GET 接口（如 Flask/Django） fetch('https://your-python-api.com/data') .then(response => { if (!response.ok) { throw new Error(`HTTP 错误! 状态码: ${response.status}`); // 处理 HTTP 错误（如 404/500）[^3] } return response.json(); // 解析 JSON 响应（Python 常用格式） }) .then(data => { console.log('从 Python 后端获取的数据:', data); // 示例: { "message": "Hello" } }) .catch(error => { console.error('请求失败:', error); // 网络错误或解析失败 }); ``` --- #### 2. **POST 请求（发送 JSON 数据到 Python 后端）** ```javascript const userData = { name: "John", email: "[email protected]" }; fetch('https://your-python-api.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json', // 必须声明 JSON 格式 'Authorization': 'Bearer your_token' // JWT 认证示例 }, body: JSON.stringify(userData) // 将对象转为 JSON 字符串 }) .then(response => response.json()) .then(data => console.log('创建的用户:', data)) .catch(error => console.error('提交失败:', error)); ``` > **Python 后端提示**：使用 `request.get_json()`（Flask）或 `json.loads(request.body)`（Django）解析数据[^1]。 --- #### 3. **处理不同响应类型** Fetch 支持多种响应解析方式（根据 Python 后端的返回类型选择）： ```javascript // 解析 JSON（最常见） response.json().then(data => { /*...*/ }); // 解析文本（如 CSV） response.text().then(text => { /*...*/ }); // 解析二进制（如图片/文件）[^4] response.arrayBuffer().then(buffer => { const blob = new Blob([buffer], { type: 'image/png' }); const img = URL.createObjectURL(blob); document.getElementById('img').src = img; }); ``` --- #### 4. **高级功能与最佳实践** ##### (1) 拦截请求（统一处理） ```javascript // 全局拦截 fetch 请求（如添加认证头）[^2] const originalFetch = window.fetch; window.fetch = async (...args) => { const [url, config] = args; // 添加公共请求头 const modifiedConfig = { ...config, headers: { ...config?.headers, 'X-Request-From': 'WebApp' } }; return originalFetch(url, modifiedConfig); }; ``` ##### (2) 超时控制 ```javascript // 为请求设置超时（8秒） const fetchWithTimeout = (url, options = {}, timeout = 8000) => { return Promise.race([ fetch(url, options), new Promise((_, reject) => setTimeout(() => reject(new Error('请求超时')), timeout) ) ]); }; ``` ##### (3) 错误统一处理 ```javascript // 封装 fetch 处理 HTTP 错误和业务错误 async function safeFetch(url, options) { const response = await fetch(url, options); if (!response.ok) throw new Error(`后端错误: ${response.status}`); const data = await response.json(); if (data.code !== 200) throw new Error(`业务错误: ${data.message}`); // Python 返回的 {code, message} return data; } ``` --- #### 5. **与 Axios/AJAX 的关键区别** | 特性 | Fetch API | Axios | AJAX | |--------------|------------------------------------|--------------------|-------------------| | **安装** | 浏览器原生支持 | 需安装 npm 包 | 依赖 `XMLHttpRequest` | | **JSON处理** | 需手动调用 `response.json()` | 自动转换 JSON | 需手动解析 | | **错误处理** | 不 reject HTTP 错误（如 404）[^3] | 自动 reject 非 2xx | 需手动检查状态码 | | **取消请求** | 通过 `AbortController` 实现 | 内置取消令牌 | 需手动中止 | > **建议**：简单场景用 Fetch，复杂项目（需拦截器/取消请求）用 Axios[^1]。 --- ### 总结 使用 Fetch 对接 Python 后端时： 1. **请求配置**：明确设置 `method`、`headers`（尤其 `Content-Type`） 2. **响应处理**：根据 Python 返回类型选择 `.json()`/`.text()`/`.arrayBuffer()` 3. **错误处理**：检查 `response.ok` 和业务状态码[^3] 4. **安全优化**： - 后端启用 CORS（Flask 用 `flask-cors`，Django 用 `django-cors-headers`） - 敏感请求添加 JWT 认证头 > 完整项目建议封装通用 Fetch 工具类（参考[^3]），处理认证、错误和日志。