vue网络应用——axios

axios

功能强大的网络请求库。
导入方式：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
请求格式：axios.get(地址?key=value&key2=values).then(function(respone){},function(err){}) axios.post(地址,{key:value,key2:value2}).then(function(respone){},function(err){})

    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">

    <!-- 导入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- js逻辑 -->
    <script>
        // 接口1：随机笑话  请求方法：get   请求参数：num(笑话条数，数字)
        document.querySelector(".get").onclick = function(){    // .get就是查找class为get的标签
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            .then(function(respone){
                console.log(respone);   // 请求成功
            },function(){
                console.log(err);       // 请求失败
            })
        }

        // 接口2：用户注册  请求方法：post   请求参数：username(用户名，字符串)
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})
            .then(function(respone){
                console.log(respone);
            },function(){
                console.log(err);
            })
            
        }
    </script>

通过get和post方法便可以发送对应的请求，then方法中的回调函数会在请求成功/失败的时候触发。通过回调函数的形参，可以获取响应内容/错误信息。

axios + vue联合使用

详细使用方式见下面代码。
注意，axios回调函数中的this已经改变，因此不可以直接使用this方式访问到data中的数据。可以在axios回调函数外先将this保存起来，在回调函数中直接使用这个被保存的this。和本地应用最大的区别是改变了数据的来源。

<div id="app">
        <input type="button" value="点击随机获取笑话" @click="getJoke()">
        <p>{{joke}}</p>
    </div>

    <!-- 引入vue.js -->
    <script src="../libs/vue.js"></script>
    <!-- 导入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- js逻辑 -->
    <script>
        var vn = new Vue({
            el:"#app",
            data:{
                joke:"笑话"
            },
            methods:{
                getJoke:function(){
                    var oldThis = this;
                    axios.get("https://autumnfish.cn/api/joke").then(
                        function(respone){
                            console.log(this.joke);  // 在这里this已经改变，值为undefined
                            console.log(respone.data);
                            oldThis.joke = respone.data;   // 为了同步之前的this，则在前面保存this为oldThis
                        },
                        function(err){
                            console.log(err);
                        }
                    )
                }
            }
        })
    </script>