前后端交互02之fetch调用接口-了解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
1. fetch基本特性
更加简单的数据获取方式,ajax的升级版
基于Promise实现
2. 实现方式
fetch("接口",{参数}).then((data)=>{
return data.text() 返回的是一个Promise对象,属于fetchAPI的一部分
return data.json() 返回的是一个Promise对象 获取到的数据json格式
}).then((data)=>{
data才是真正获取到的数据 上面如果是data.text(),则此时获取到的数据是字符串数据
如果是data.json() 则此时获取到的是json格式的数据
})
3. fetch请求参数
methods:HTTP请求方法,默认为GET,(POST,PUT,DELETE)
body:请求参数
headers:http请求头
-->
<script>
// get传参 一种是在url路径下接参数,一种:?id=1&name=zhangsan
fetch("http://127.0.0.1:5000/news_detail/2", {
method: "GET",
}).then((data) => {
return data.text()
}).then((data) => {
console.log(data);
})
// POST传参
fetch("http://127.0.0.1:5000/code", {
method: "POST",
// POST参数
// body: "phone=15612121212&img_code=1212",
body: JSON.stringify({
phone: '15612121212',
img_code: "1212"
}),
headers: {
"Content-Type": "application/json"
}
}).then((data) => {
return data.text()
}).then((data) => {
console.log(data);
})
</script>
</body>
</html>