Vue网络应用

Vue网络应用

axios

功能强大的网络请求库

//导入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• axios必须先导入才可以使用
• 使用get或post方法即可发送对应的请求
• then方法中的回调函数会在请求成功或失败时触发
• 通过回调函数的形参可以获取响应内容，或错误信息

axios+vue

axios结合vue开发网络应用

• 例子

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

    <!-- 引入vue和axios -->
    <script src="../js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    <script>
        /*
        请求地址：https://autumnfish.cn/api/joke
        */
        var app = new Vue({
            el: "#app",
            data: {
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function(){
                    var that=this;//axios回调函数中的this会改变，无法访问到data中的数据，所以提前把它保存下来
                    axios.get("https://autumnfish.cn/api/joke").then
                    (function(response){
                        //console.log(response)
                        console.log(response.data)//只显示笑话
                        that.joke=response.data;
                    },function(err){

                    })

                }
            }
        })
    </script>

• 点击按钮前的运行结果
  

• 点击按钮后的运行结果