三、Vue.js快速入门-网络应用（axios）

青旅半醒 2021-09-25 15:20 281阅读 0赞

# 网络应用（axios） #

Vue结合网络数据开发应用

## axios基本使用 ##

### axios必须先导入才可以使用 ###

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

###  基本get请求和post请求格式 ###

#get请求
    axios.get(地址?key=value&key2=values).then(function(response){},function(err){}) 
    #post请求
    axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

###  基本使用示例 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>axios基本使用</title>
    </head>
    
    <body>
        <input type="button" value="get请求" class="get">
        <input type="button" value="post请求" class="post">
        
        <script src="https://unpkg.com/axios/dist/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=6")
                // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
                .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:"盐焗西兰花"})
                .then(function(response){
                    console.log(response);
                    console.log(this.skill);
                },function (err) {
                    console.log(err);
                  })
              }
    
        </script>
    </body>
    
    </html>

### 总结： ###

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

文档参考  [https://github.com/axios/axios][https_github.com_axios_axios]

## axios+vue ##

axios结合vue开发网络应用

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>axios+vue</title>
    </head>
    
    <body>
        <div id="app">
            <input type="button" value="获取笑话" @click="getJoke">
            <p> {
       { joke }}</p>
        </div>
        
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            /*
                接口:随机获取一条笑话
                请求地址:https://autumnfish.cn/api/joke
                请求方法:get
                请求参数:无
                响应内容:随机笑话
            */
            var app = new Vue({
                el:"#app",
                data:{
                    joke:"很好笑的笑话"
                },
                methods: {
                    getJoke:function(){
                        // console.log(this.joke);
                        var that = this;
                        axios.get("https://autumnfish.cn/api/joke").then(function(response){
                            // console.log(response)
                            console.log(response.data);
                            // console.log(this.joke);
                            that.joke = response.data;
                        },function (err) {  })
                    }
                },
            })
    
        </script>
    </body>
    
    </html>

>  *   axios回调函数中的this已经改变,无法访问到data中数据
>  *   把this保存起来,回调函数中直接使用保存的this即可
>  *   和本地应用的最大区别就是改变了数据来源

[https_github.com_axios_axios]: https://github.com/axios/axios