前端数据处理：AJAX与Fetch API深入解析

// 使用Fetch API发送GET请求
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (response.ok) {
    return response.json(); // 解析JSON数据
  }
  throw new Error('Network response was not ok.');
})
.then(data => {
  console.log('获取到的数据:', data);
})
.catch(error => {
  console.error('请求失败:', error);
});
 
// 使用Fetch API发送POST请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' }) // 发送的数据
})
.then(response => {
  if (response.ok) {
    return response.json(); // 解析JSON数据
  }
  throw new Error('Network response was not ok.');
})
.then(data => {
  console.log('服务器响应:', data);
})
.catch(error => {
  console.error('请求失败:', error);
});

这个代码示例展示了如何使用Fetch API发送GET和POST请求，并在请求成功或失败时进行处理。这是目前推荐的前端数据请求方式，因为它更加灵活和强大。