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块中捕获并处理。