Fetch怎么用最简单？JS中的请求你掌握好了吗？

现代Web开发中，前后端数据交互是核心需求之一。曾几何时，开发者们需要依赖笨重的XMLHttpRequest对象发起请求，而现在基于Promise的Fetch API彻底改变了游戏规则。本文将用最直白的语言，带你掌握这个现代JavaScript请求利器的精髓。

一、Fetch基础用法速成

1.1 GET请求三步走

最基本的请求只需一个URL参数：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

这里response.json()自动解析JSON数据，若需文本格式可改用response.text()

1.2 POST请求完整模板

发送JSON数据需要配置请求参数：

fetch('/api/submit', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    username: '张三',
    age: 28
  })
})
.then(res => res.json())

二、高级配置技巧

2.1 请求头定制

通过headers对象添加认证信息：

headers: {
  'Authorization': 'Bearer your_token',
  'X-Custom-Header': 'value'
}

2.2 超时控制方案

原生Fetch不提供超时参数，但可通过Promise组合实现：

const timeout = new Promise((_, reject) => {
  setTimeout(() => reject(new Error('请求超时')), 5000)
});

Promise.race([
  fetch('/api/data'),
  timeout
]).then(...)

三、错误处理大全

3.1 网络错误捕获

使用catch处理网络层异常：

fetch(...)
  .catch(error => {
    console.error('网络错误:', error);
    showToast('网络连接异常');
  });

3.2 HTTP状态码处理

手动校验响应状态：

.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP错误! 状态码: ${response.status}`);
  }
  return response.json();
})

四、异步写法优化

使用async/await让代码更易读：

async function loadData() {
  try {
    const response = await fetch('/api/data');
    return await response.json();
  } catch (error) {
    handleError(error);
  }
}

五、横向技术对比

六、最佳实践指南

• 封装通用请求函数 统一处理错误和loading状态
• Content-Type要准确 表单提交用application/x-www-form-urlencoded
• 跨域配置注意 服务端需设置CORS头部
• 取消请求 使用AbortController实现请求中断

通过以上内容，相信你已经掌握了Fetch的核心用法。在实际项目中，建议结合业务需求选择合适的请求库。对于简单场景，原生Fetch足以应对；复杂项目则推荐使用Axios等成熟方案。记住，技术选型的核心准则是「用合适的工具做正确的事」。