27.使用vue-resource请求数据

下载地址如下：
https://github.com/pagekit/vue-resource
测试的URL请求资源地址：
get请求地址： http://www.liulongbin.top:3005/api/getlunbo
post请求地址：http://www.liulongbin.top:3005/api/post
jsonp请求地址：http://www.liulongbin.top:3005/api/jsonp

<!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=adge">
    <title>Document</title>
    <script src="vue.js"></script>
    <!-- vue-resource.js只能在vue.js后面导入  -->
    <script src="vue-resource.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="Get请求" @click="getInfo">
        <input type="button" value="Post请求" @click="postInfo">
        <input type="button" value="jsonp请求" @click="jsonpInfo">
    </div>
</body>
<script>
    //创建Vue实例，得到ViewModel
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{
            /*getInfo(){//get请求数据
                //console.log(this.$http)//如果没有导入vue-resource.js是undefined。导入了就有对应的值
                this.$http.get("http://www.liulongbin.top:3005/api/getlunbo").then(function(data){
                    console.log(data.body)
                })
            }*/
            /*
            async getInfo(){
                const result=await this.$http.get("http://www.liulongbin.top:3005/api/getlunbo")
                console.log(result)
            }*/
            async getInfo(){//get请求数据
                const {body}=await this.$http.get("http://www.liulongbin.top:3005/api/getlunbo")
                console.log(body)
            },
            async postInfo(){//post请求数据
                const {body}=await this.$http.post("http://www.liulongbin.top:3005/api/post",{"name":"孙悟空","age":800,"like":"打妖怪"})
                console.log(body)
            },
            async jsonpInfo(){//jsonp请求数据
                const {body}=await this.$http.jsonp("http://www.liulongbin.top:3005/api/jsonp")
                console.log(body)
            }
        }
    });
</script>
</html>

 

posted @ 2021-03-12 20:45  种太阳  阅读(18)  评论(0)  编辑  收藏  举报