fetch向后端请求数据：get/post/put/patch/delete方式、解决catch不能主动捕获错误问题（超详细笔记）

在JavaScript中，使用fetch API进行前端网络请求时，可以使用不同的HTTP方法（如GET、POST、PUT、PATCH和DELETE）来操作后端资源。以下是使用fetch进行这些方法请求的示例代码：

// GET请求
fetch('https://api.example.com/data', {
  method: 'GET',
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
 
// POST请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
 
// PUT请求
fetch('https://api.example.com/data/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
 
// PATCH请求
fetch('https://api.example.com/data/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'new value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
 
// DELETE请求
fetch('https://api.example.com/data/1', {
  method: 'DELETE',
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

注意，在fetch的then方法中，如果没有发生错误，它会被解析为相应的响应对象。如果发生错误，或者response.json()解析JSON数据失败，则会被捕获并在catch方法中处理。

确保后端服务器正确处理这些HTTP方法，并且在请求中正确设置了必要的头部（headers）和请求体（body）。