1.fetch功能说明
fetch是一个现代的 JavaScript API，用于在浏览器中进行网络请求。它提供了一种更灵活、更强大的方式来获取资源，相比于传统的XMLHttpRequest（XHR），fetch具有更简洁的语法和基于 Promise 的异步处理机制。
基本语法：
fetch()函数接受一个必需的参数，即要获取资源的URL，例如：
fetch('https://example.com/api/data');它返回一个Promise对象，这个Promise会在请求响应成功或失败时被解决或被拒绝。
可以给fetch函数传递第二个可选参数，这是一个配置对象，用于配置请求的各种参数，如请求方法（method）、请求头（headers）、请求体（body）等，例如：
fetch('https://example.com/api/submit', {
method: 'POST',
headers: {
'Content - Type': 'application/json'
},
body: JSON.stringify({
key: 'value'
})
});2.实现GET请求示例
GET是fetch默认的请求方法。用于从服务器获取数据，通常用于查询操作。例如，获取用户列表、文章内容等。它不会对服务器上的数据进行修改，请求的数据通过URL传递。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch GET Example</title>
</head>
<body>
<button onclick="sendGetRequest()">发送GET请求</button>
<script>
function sendGetRequest() {
// 要请求的URL
const url = 'https://example.com/api/data';
// 使用fetch发送GET请求
fetch(url)
.then(response => response.json())
.then(data => {
console.log('获取到的数据:', data);
// 在这里可以对获取到的数据进行进一步处理，比如更新页面内容等
})
.catch(error => {
console.error('请求出错:', error);
});
}
</script>
</body>
</html>在上述示例中：
1.首先点击页面上的按钮时，会触发sendGetRequest函数。
2.函数内部使用fetch函数并传入要请求的 URL（这里假设是https://example.com/api/data，实际使用时需替换为真实的 API 地址）来发送 GET 请求。
3.fetch返回一个Promise，通过.then方法处理响应。首先将响应解析为 JSON 格式（如果响应数据是 JSON 格式的话），然后可以在后续的.then中对获取到的数据进行处理，比如打印到控制台或者更新页面元素等。如果请求过程中出现错误，会在.catch块中捕获并打印错误信息。
3.实现POST请求示例
POST用于向服务器提交数据，通常用于创建新的资源。比如在用户注册时，将用户信息发送给服务器创建新用户账号。除了POST之外，还可以使用PUT（用于更新资源的全部内容）、PATCH（用于更新资源的部分内容）、DELETE（用于删除资源）等请求方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch POST Example</title>
</head>
<body>
<button onclick="sendPostRequest()">发送POST请求</button>
<script>
function sendPostRequest() {
// 要请求的URL
const url = 'https://example.com/api/submit';
// 要发送的数据，这里以一个简单的对象为例
const data = {
name: 'John',
age: 30
};
// 设置请求头，表明发送的数据是JSON格式
const headers = {
'Content-Type': 'application/json'
};
// 使用fetch发送POST请求
fetch(url, {
method: 'POST',
headers: headers,
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log('服务器返回的数据:', data);
// 同样可以在这里对返回数据进行进一步处理
})
.catch(error => {
console.error('POST请求出错:', error);
});
}
</script>
</body>
</html>在上述POST 请求示例中：
1.首先点击按钮触发sendPostRequest函数。
2.定义了要请求的 URL（假设为https://example.com/api/submit，需替换为真实地址）以及要发送的数据对象data。
3.设置了请求头headers，指定发送的数据是 JSON 格式，因为我们要发送的body数据会被转换为 JSON 字符串。
4.使用fetch发送 POST 请求时，传入了额外的配置对象，其中包括请求方法method设为POST，请求头headers以及要发送的body数据（通过JSON.stringify将对象转换为字符串）。
5.后续处理响应的方式与 GET 请求类似，先将响应解析为 JSON 格式，然后根据需要对返回的数据进行处理，若出现错误则在.catch块中捕获并处理。
