Fetch的GET和POST请求：Web开发中的基础技能

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

Fetch API 提供了一个 JavaScript Promise 来获取资源，它比传统的 XMLHttpRequest 更加简洁和强大。Fetch API 支持 GET 和 POST 请求，这两种请求是 Web 开发中最常用的 HTTP 方法。

GET 请求

GET 请求用于从服务器获取数据。使用 Fetch API 发送 GET 请求非常简单。

示例代码

fetch('https://api.example.com/data', {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
headers: {
'Content-Type': 'application/json'
// 其他头部信息
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 解析响应体为JSON
})
.then(data => {
console.log(data); // 处理获取到的数据
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});

POST 请求

POST 请求用于向服务器提交数据。在使用 Fetch API 发送 POST 请求时，需要将数据包含在请求体中。

示例代码

const data = {
key1: 'value1',
key2: 'value2'
};

fetch('https://api.example.com/data', {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
headers: {
'Content-Type': 'application/json'
// 其他头部信息
},
body: JSON.stringify(data) // 将数据转换为JSON字符串
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 解析响应体为JSON
})
.then(data => {
console.log('Success:', data); // 处理服务器返回的数据
})
.catch(error => {
console.error('Error:', error);
});

注意事项

• Fetch API 返回的是一个 Promise 对象，因此需要使用 .then() 和 .catch() 方法来处理响应和错误。
• 默认情况下，Fetch API 不会发送或接收 cookies。如果需要发送 cookies，需要设置 credentials 选项为 'include'。
• Fetch API 不会在网络错误时抛出异常，而是返回一个状态码为 0 的响应对象。因此，需要检查 response.ok 属性来判断请求是否成功。
• 对于跨域请求，服务器需要设置合适的 CORS 头部信息。

结论

Fetch API 提供了一种现代且强大的方式来处理 HTTP 请求。通过掌握 GET 和 POST 请求的使用方法，可以有效地与服务器进行数据交互。在实际开发中，根据不同的需求，可能还需要使用其他 HTTP 方法，如 PUT、DELETE 等，并且可能需要处理更复杂的请求和响应场景。