vue数据请求方式
vue-resource请求
从vue的2.0开始，作者说：vue-resource不再维护了
resource—get请求
HTML：
<div id="app">
<ul>
<li v-for="book in books">{{book.title}}</li>
</ul>
<button @click=\'get\'>发送http请求</button>
</div>
JavaScript：
<script src="./base/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
//引入Vue-resourse之后，可以在Vue实例或者组件上绑定一个$http的一个属性
new Vue({
el: "#app",
data: {
books:[]
},
methods:{
get(){
this.$http.get("./json/temp.json").then(res=>{
this.books = res.data.books
})
}
}
})
</script>
resource—jsonp请求
HTML：
<div id="app">
<input type="text" v-model="good" @keyup.enter=\'jsonp\'>
<button @click=\'jsonp\'>请求jsonp数据</button>
<ul>
<li v-for=\'item in result\'>{{item[0]}}</li>
</ul>
</div>
JavaScript:
<script src="./base/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
new Vue({
el: \'#app\',
data:{
result:[],
good:\'\'
},
methods:{
jsonp(){
this.$http.jsonp(\'http://suggest.taobao.com/sug?code=utf-8\',{
params:{
q:this.good
}
}).then(res =>{
console.log(res)
this.result = res.data.result
this.good = \'\'
})
}
}
})
</script>
fetch请求（规范）
why: XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱， 而且基于事件的异步模型写起来不友好。
查看兼容性： https://caniuse.com/#search=fetch
兼容性不好 polyfill: https://github.com/camsong/fetch-ie8
fetch—get请求
HTML:
<div id="app"> <p><button @click="handleClick">fetch请求</button></p> </div>
JavaScript:
new Vue({
el:"#app",
methods:{
handleClick(){
fetch("./json/temp.json").then(res=>{
return res.json() //需要让其返回json格式的数据
}).then(res=>{
console.log(res)
})
}
}
})
fetch—post请求
HTML:
<div id="app"> <p><button @click="handleClick">fetch请求</button></p> </div>
JavaScript：
new Vue({
el:"#app",
methods:{
handleClick(){
fetch("./json/temp.json",{
method:"post",
headers:{
//帮助我们解决utf-8进行编码的数据了
"Content-Type":"application/x-www-form-urlencoded"
},
body:"name=zhangsan&age=10"
}).then(res=>res.json()).then(res=>console.log(res))
}
}
})
fetch—json请求
HTML：
<div id="app"> <p><button @click="handleClick">fetch请求</button></p> </div>
JavaScript：
new Vue({
el:"#app",
methods:{
handleClick(){
fetch("./json/temp.json",{
method:"post",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
name:"张三",
age:20
})
}).then(res=>res.json()).then(res=>console.log(res))
}
}
})
** Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: ‘include’})*
axios请求
axios—get请求
HTML:
<div id="app"> <p><button @click="handleClick">fetch请求</button></p> </div>
JavaScript:
new Vue({
el:"#app",
methods:{
handleClick(){
axios.get("json/test.json?name=zhangsan&age=10").then(res=>{
// res.data 才是真正的后端数据
console.log(res.data.data.films)
this.datalist = res.data.data.films
})
}
}
})
axios—post请求
HTML:
<div id="app"> <p><button @click="handleClick">fetch请求</button></p> </div>
JavaScript:
new Vue({
el:"#app",
methods:{
handleClick(){
axios.post("json/test.json","name=zhangsan&age=10").then(res=> {
console.log(res.data)
})
}
}
})
axios—json请求
HTML:
<div id="app"> <p><button @click="handleClick">fetch请求</button></p> </div>
JavaScript:
new Vue({
el:"#app",
methods:{
handleClick(){
axios.post("json/test.json",{
name:"zhangsan",
age:100
}).then(res=>{
console.log(res.data)
})
}
}
})
以上是 vue数据请求方式 的全部内容， 来源链接： utcz.com/z/377889.html
