28.axios结合vue发起请求

下载地址：
https://github.com/axios/axios
引入，两个都可以：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios设置默认地址：
axios.defaults.baseURL=""

<!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>
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <!--<script src="<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>"></script>-->
    <!--<script src="axios-unpkg.js"></script>-->
    <script src="axios.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="Get请求" @click="getInfo">
        <input type="button" value="Post请求" @click="postInfo">
    </div>
</body>
<script>
    //把axios挂载到vue构造函数的原型上
    Vue.prototype.$http=axios
    //创建Vue实例，得到ViewModel
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{
            async getInfo(){
                //this.$http.get()
                /*const {data} =await axios.get("http://www.liulongbin.top:3005/api/getlunbo")
                console.log(data)*/
                const {data} =await this.$http.get("http://www.liulongbin.top:3005/api/getlunbo")
                console.log(data)
            },
            async postInfo(){
                const {data}=await this.$http.post("http://www.liulongbin.top:3005/api/post",{"name":"小三"})
                console.log(data)
            }
        }
    });
</script>
</html>

 

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