fetch
程序员文章站
2022-04-15 18:38:15
...
fetch请求
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../basic-source/vue.js"></script>
</head>
<body>
<div id="app">
<h3> fetch-----------get post --------</h3>
<button @click = "get"> get </button>
<button @click = "post"> post </button>
</div>
</body>
<script>
new Vue({
el: '#app',
// data: {
// numobj: {
// a: 1,
// b: 2
// }
// },这个是为了给get（）第一个方法url用的，需要请求数据，使用node.js中的URl
methods:{
get(){
// fetch('http://127.0.0.1:8080/php/vue-day05/get.php?a=1&b=2')
// .then(res=>res.text())
// .then(data=>{
// console.log(data)
// })
// .catch(error=>{
// if(error){
// throw error
// }
// })
fetch('data.json')
.then(res=>{
res.json();
})
.then(data => {
console.log(data);
})
.catch( error => console.log( error ));//出来的是undefined
},
post(){
fetch('http://127.0.0.1:8080/php/vue-day05/post.php',{
method:'post',
headers:new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
}),//这里需要记住
body:new URLSearchParams([['a',1],['b',2]]).toString()
})// 通过 new URLSearchParams() 来进行数据传参
.then(res=>res.text())
.then(data=>{
console.log(data)
})
.catch(error=>{
if(error){
throw error
}
})
}
}
})
</script>
</html>