html5使用fetch代替XMLHttpRequest html5使用更简洁的异步数据获取

蓮花仙者 2025-10-27 00:00:00 次阅读

fetch 是现代前端推荐的网络请求方式，基于 Promise 提供简洁语法和清晰逻辑，支持 GET/POST 请求及多种响应格式解析，相比 XMLHttpRequest 更易读且便于使用 async/await，需手动处理 HTTP 错误状态，结合 AbortController 可实现超时控制，通过 polyfill 兼容旧浏览器。

在现代前端开发中，fetch 已成为替代传统 XMLHttpRequest 的首选方式。它基于 Promise，语法更简洁，逻辑更清晰，尤其适合处理异步数据请求。

fetch 的基本用法

fetch 提供了一个全局方法用于发起网络请求，默认使用 GET 方法：

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应异常');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

相比 XMLHttpRequest 冗长的事件监听和状态判断，fetch 更直观，代码更易读。

发送 POST 请求

使用 fetch 发送携带数据的 POST 请求也很简单：

fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: '张三', age: 25 })
})
.then(response => response.json())
.then(result => {
  console.log('成功:', result);
})
.catch(error => {
  console.error('错误:', error);
});

配置项清晰明了，无需手动设置请求头或监听状态变化。