详解Vuejs2.0之异步跨域请求

name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
created:function(){
this.HelloAxios();
},
methods:{
HelloAxios(){
this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data));
}
}
}
</script>

至此我们完成了Get请求，接下来，我们完成Post请求

<script>
export default {
 name: 'hello',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 }
 },
 created:function(){
 this.HelloAxios();
 this.HelloAxiosPost('HelloAxiosPost');
 },
 methods:{
 HelloAxios(){
  this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data));
 },
 HelloAxiosPost(val){
  let str = 'value='+val
  this.$http.post('http://localhost:54903/api/values',str).then(m=>console.log(m.data));
 }
 }
}
</script>

结果如图，我们传的值’HelloAxiosPost’也打印出来了。有人可能会问

 

这里问什么要这么写，官方文档是这么写的

亲测这样写不行。有兴趣的朋友可以自行测试。那我们再来说说为何是那个字符串

查看chorme F12查看一下网络请求，发现我们请求的值就是Form Data。这样我们就可以拼接参数请求了，多参数格式为param1=value1&param2=value2。

好了，至此本文结束了，希望对大家的学习有所帮助，也希望大家多多支持软件开发网。