JavaScript使用Fetch网络请求的方法详解

原创 2025-06-07 09:50:46编程技术

356

在前端开发中，网络请求是连接客户端与服务端的核心桥梁。随着现代浏览器的发展，Fetch API 已成为替代传统 XMLHttpRequest 的主流方案。本文ZHANID工具网将系统讲解 Fetch 的使用方法，从基础语法到高级技巧，助你全面掌握这一工具。

一、Fetch 基础语法

1.1 基本 GET 请求

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('Error:', error));

关键点解析：

返回 Promise 对象，天然支持异步操作
需手动检查 response.ok 判断 HTTP 状态码
使用 response.json() 解析 JSON 响应体

1.2 发送 POST 请求

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: 'john_doe',
    password: 'secret123'
  })
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

重要配置项：

method: 指定 HTTP 方法（GET/POST/PUT/DELETE 等）
headers: 设置请求头（注意 Content-Type 需与 body 格式匹配）
body: 请求体内容，支持多种格式（JSON/FormData/Blob 等）

二、响应处理进阶

2.1 响应对象方法

fetch(url)
  .then(response => {
    console.log('Status:', response.status);    // HTTP 状态码
    console.log('Headers:', response.headers.get('Content-Type')); // 获取响应头
    console.log('Redirected:', response.redirected); // 是否重定向
    
    // 根据内容类型选择解析方式
    const contentType = response.headers.get('content-type');
    if (contentType.includes('application/json')) {
      return response.json();
    }
    return response.text();
  });

2.2 错误处理最佳实践

async function fetchData() {
  try {
    const response = await fetch(url);
    
    // HTTP 错误处理
    if (!response.ok) {
      const errorMessage = await response.text();
      throw new Error(`${response.status}: ${errorMessage}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    // 统一错误处理逻辑
    showErrorNotification(error.message);
  }
}

三、高级功能实现

3.1 并发请求控制

// 使用 Promise.all 处理并发
Promise.all([
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments')
])
.then(responses => Promise.all(responses.map(r => r.json())))
.then(data => {
  const [users, posts, comments] = data;
  // 处理多个响应数据
});

// 使用竞态控制（race）
const timeoutId = setTimeout(() => {
  throw new Error('Request timed out');
}, 5000);

Promise.race([
  fetch(url),
  new Promise((_, reject) => 
    setTimeout(() => reject(new Error('Timeout')), 5000)
  )
])
.finally(() => clearTimeout(timeoutId));

3.2 文件上传

const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
formData.append('userId', '12345');

fetch('/api/upload', {
  method: 'POST',
  body: formData,
  // 无需设置 Content-Type，浏览器会自动设置 multipart/form-data
});

3.3 请求取消

const controller = new AbortController();
const { signal } = controller;

fetch('/api/data', { signal })
  .then(response => {
    // 处理响应
  })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已取消');
    }
  });

// 取消请求（例如在组件卸载时）
controller.abort();

四、Fetch vs 传统方案对比

特性	Fetch API	XMLHttpRequest
语法风格	Promise 链式调用	回调函数
默认携带 Cookie	需显式设置	自动携带
进度监控	不支持	支持 onprogress
超时控制	需手动实现	支持 timeout 属性
浏览器兼容性	IE11+ 需 polyfill	所有浏览器

兼容性处理方案：

// 使用 polyfill 支持旧浏览器
import 'whatwg-fetch';

// 或通过条件加载
if (!window.fetch) {
  require('whatwg-fetch').polyfill();
}

五、最佳实践建议

始终验证响应状态
Fetch 不会自动拒绝非 2xx 状态码，需手动检查 response.ok

合理设置请求头

// 常见安全头设置
headers: {
  'X-Requested-With': 'XMLHttpRequest',
  'Cache-Control': 'no-cache'
}

大文件分片上传

const chunkSize = 1024 * 1024; // 1MB
let start = 0;

async function uploadChunk() {
  const chunk = file.slice(start, start + chunkSize);
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('start', start);
  
  const res = await fetch('/upload', {
    method: 'POST',
    body: formData
  });
  
  start += chunkSize;
  if (start < file.size) {
    uploadChunk();
  }
}

使用 AbortController 取消请求
在单页应用路由切换时及时取消进行中的请求

服务端缓存策略
通过 Cache-Control 头控制缓存行为：

fetch(url, { cache: 'force-cache' }); // 强制使用缓存
fetch(url, { cache: 'reload' });      // 跳过缓存重新请求

六、调试技巧

Chrome DevTools 使用

Network 标签页查看请求详情
Copy as Fetch 生成代码片段
模拟慢速网络环境测试

拦截与模拟请求

// 使用 Service Worker 拦截请求
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/data')) {
    event.respondWith(
      new Response(JSON.stringify({ mockData: true }))
    );
  }
});

日志记录中间件

const logMiddleware = async (url, options) => {
  console.log(`[FETCH] ${options.method} ${url}`);
  const response = await fetch(url, options);
  console.log(`[RESPONSE] ${response.status} ${url}`);
  return response;
};

// 使用示例
logMiddleware('/api/data', { method: 'GET' })
  .then(response => response.json())
  .then(console.log);