vue+axios网络应用

1.axios

• axios必须先导入才可以使用
• 使用get和post方法可以发送对应请求
• then方法中的回调函数会在请求成功或失败时触发

网络请求库：

   <input type="button" value="get请求" class="get">
        <input type="button" value="post请求" class="post">
 
   
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        
        document.querySelector(".get").onclick=function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);     
            })
        }
        document.querySelector(".post").onclick=function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"淡淡的发还"})
            .then(
                function(response){
                    console.log(response);
                    
                },function(err){
                    console.log(err);
                    
                }
            ) 
        }

    </script>

2.axios+vue

• axios中的this函数已经改变，无法访问到data内容
• 把this保存起来，回调函数中直接使用保存的this即可

<div id="app">
           
            <input type="button" value="获取笑话" @click="getJoke">
            <p>{{ joke }}</p>
        </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app=new Vue({
        el:"#app",
        data:{
            joke:"笑话"
        },
        methods:{
           
            getJoke:function(){
                var that=this;
        axios.get("https://autumnfish.cn/api/joke")
        .then(function(response){
            console.log(response.data);
            
            that.joke=response.data;
        },function(err){

        })
        }
    }
        
})
    </script>

3.网络应用：天知道

两个功能：1.回车查询；2.点击查询

来源：CSDN

作者：Joker_Lie

链接：https://blog.csdn.net/Joker_Lie/article/details/104113285