JavaScript中的fetch用于发起HTTP请求并处理响应，返回一个Promise对象，支持异步操作。 以下是具体用法和注意事项：
1. 基本GET请求fetch('https://api.example.com/data'
) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // 解析JSON数据 }) .then(data => console.log(data)) // 处理成功响应 .catch(error => console.error('Fetch error:', error)); // 捕获错误2. POST请求fetch('https://api.example.com/data'
, { method: 'POST', headers: { 'Content-Type': 'application/json', // 指定请求体格式 }, body: JSON.stringify({ key: 'value' }), // 转换为JSON字符串}) .then(response => response.json()) .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error));- 关键点：
通过method指定请求方法（如POST、PUT、DELETE）。
headers设置请求头，例如Content-Type声明数据格式。
body传递请求体数据，需用JSON.stringify()转换对象。
3. 高级配置发送Cookiesfetch('https://api.example.com/data'
, { credentials: 'include', // 允许跨域发送/接收Cookies});- 适用场景：需要会话管理的认证请求（如登录状态保持）。
自定义请求头fetch('https://api.example.com/data'
, { headers: { 'Authorization': 'Bearer token123', // 添加认证令牌 'X-Custom-Header': 'value', },});处理非JSON响应fetch('https://api.example.com/text'
) .then(response => response.text()) // 解析为纯文本 .then(text => console.log(text));- 其他方法：response.blob()（二进制数据）、response.formData()（表单数据）。
4. 注意事项错误处理陷阱：
fetch默认仅在网络失败时拒绝Promise，HTTP错误（如404）不会触发catch，需手动检查response.ok。
示例改进：fetch(url) .then(response => { if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); return response.json(); }) .catch(error => console.error('Request failed:', error));
CORS限制：
跨域请求需服务器支持CORS，否则浏览器会拦截响应。
简单请求（如GET/POST含特定头）可直接发送；复杂请求需预检（OPTIONS）。
性能优化：
避免重复请求：使用缓存策略（如Cache API）或服务端缓存。
取消请求：通过AbortController中止未完成的请求：const controller = new AbortController();fetch(url, { signal: controller.signal }) .catch(error => { if (error.name === 'AbortError') console.log('Request canceled'); });controller.abort(); // 取消请求
5. 完整示例（含POST+错误处理）async function postData(url = '', data = {}) { try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); console.log('Success:', result); return result; } catch (error) { console.error('Error:', error); }}// 调用示例postData('https://api.example.com/data'
, { name: 'John' });总结：fetch提供了简洁的API处理HTTP请求，但需注意错误处理、CORS和性能优化。结合async/await语法可进一步提升代码可读性。
