Vue结合网络数据开发应用axios+vue

(一）axios网络请求库

为了使用这个js库，应该先进行倒包

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

axios.get(地址?查询字符串).then(function(response){},function(err){})
axios.post(地址:查询字符串).then(function(response){},function(err){})
查询字符串的格式写为：
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2).then(function(response){},function(err){})

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

axios文档传送门：https://github.com/axios/axios

例子：

<body>
    <div id="app">
        <input type="button" value="get请求" class="get">
        <input type="button" value="post请求" class="post">
    </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>
        //接口1 随机笑话
        //请求地址：https://autumnfish.cn/api/joke/list
        //请求参数：num（笑话条数，数字）
        //响应内容：随机笑话
        document.querySelector(".get").onclick = function() {
                axios.get("https://autumnfish.cn/api/joke/list?num=6")
                    .then(function(response) {
                        console.log(response)
                    })
            }
            //测试请求错误，输入一个不存在的get地址，err的function会在请求不成功时返回错误信息
            // document.querySelector(".get").onclick = function() {
            //         axios.get("https://autumnfish.cn/api/joke123/list?num=6")
            //             .then(function(response) {
            //                 console.log(response)
            //             }, function(err) {
            //                 console.log(err);
            //             })
            //     }
            //接口2：用户注册
            //请求地址：https://autumnfish.cn/api/user/reg
            //请求参数：username(用户名，字符串)
            //响应内容：注册成功或失败
        document.querySelector(".post").onclick = function() {
                axios.post("https://autumnfish.cn/api/user/reg", {
                        username: "wangjunkai"
                    })
                    .then(function(response) {
                        console.log(response)
                    })
            }
            //测试请求错误，输入一个不存在的post地址，err的function会在请求不成功时返回错误信息
            // document.querySelector(".post").onclick = function() {
            //     axios.post("https://autumnfish.cn/api/user123/reg", {
            //             username: "wangjunkai"
            //         })
            //         .then(function(response) {
            //             console.log(response)
            //         })
            // }
    </script>
</body>

请求成功

989d215b09ed14778f7cbcfa0f3cb9c.png

无效地址引起请求失败，返回错误信息

9e6f5f8ca3af0ea4b399752c987b772.png

请求成功

fd41b9f7d7ca71e3d72c838812904c2.png

network可以看到其内部属于AJAX

e89a1bfbffb50ada5c19d7eb591491d.png

（二）axios+vue，随即笑话实例

axios回调函数中this已经改变，无法访问到data中数据
应在回调前先把this保存起来，回调时直接使用保存的this
其与本地应用最大区别是改变了数据来源，从网络获取数据

<body>
    <div id="app">
        <input type="button" value="获取笑话" class="get" @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>
        //接口1 随机笑话
        //请求地址：https://autumnfish.cn/api/joke
        //请求参数：无
        //响应内容：随机笑话
        var app = new Vue({
            el: "#app",
            data: {
                joke: "很好笑的笑话"
            },
            methods: {
                getJoke: function() {
                    console.log(this.joke)
                        //注意，this会变化
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke")
                        .then(function(response) {
                            console.log(this.joke)
                            console.log(that.joke)
                            console.log(response.data)
                            that.joke = response.data
                        }, function(err) {})
                }
            }
        })
    </script>
</body>