Vue笔记5-网络应用之axios简介

网络应用

Vue 结合网络数据开发应用

axios

功能强大的网络请求库

引入这个链接即可
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>

axios.get(地址？查询字符串).then (function(response){ },function(err){ })
第一个响应函数会在响应完成时触发，第二个响应函数会在请求失败时触发，它们的形参可以用于获取信息，一个是服务器响应的内容，另一个是错误的信息，如果需要传递参数，在 url 后面跟上查询字符串（格式：key=value&key2=value2）即可。

post与get写法基本一致：
axios.post(地址,{key=value&key2=value2}).then (function(response){ },function(err){ })

axios总结：

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

 <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- axios的在线地址 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
    <script>
        /*
                            接口1：随机笑话
                            请求地址：https://autumnfish.cn/api/joke/list
                            请求方法：get
                            请求参数:num(笑话条数，数字)
                            响应内容：随机笑话
                        */
        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);
                        //错误处理
                    })
            }
            /*
                接口2：用户注册
                请求地址：https://autumnfish.cn/api/user/reg
                请求方法：post
                请求参数:username(用户名，字符串)
                响应内容：注册成功或失败
            */
        document.querySelector(".post").onclick = function() {
            axios.post("https://autumnfish.cn/api/user/reg", 
                {username: "jack"})
                .then(function(response) {
                    console.log(response);
                }, function(err) {
                    console.log(err);
                })
        }
    </script>

axios 官网：https://github.com/axios/axios