Vue vue-resource实现get-post-jsonp请求

get请求

当发起get请求之后，通过 .then 来设置成功的回调函数
通过result.body拿到服务器返回的成功的数据

<div id="app">
    <input type="button" value="get请求" @click="getInfo">
</div>
<script src="../js/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<script>
    new Vue({
    
    
        el:"#app",
        data:{
    
    },
        methods:{
    
    
            getInfo(){
    
    
                this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(function (result) {
    
    
                    console.log(result)
                })
            }
        }
    })
</script>

post请求

手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
通过post方法的第三个参数，{emulateJson:true}设置提交的内容类型为普通表单数据格式

  postInfo() {
    
    
                this.$http.post('http://www.liulongbin.top:3005/api/post',{
    
    },{
    
    emulateJson:true}).then(function (result) {
    
    
                    console.log(result.body)
                })
            }

jsonp请求

返回的是一个json 解析就好了

jsonptInfo(){
    
    
                this.$http.jsonp('http://www.liulongbin.top:3005/api/jsonp').then(function (result) {
    
    
                    console.log(result.body)
                })
            }