Vue学习06——axios的使用

axios

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

axios文档传送门

中文文档:http://www.axios-js.com/zh-cn/docs/index.html
GitHub:https://github.com/axios/axios

简单入手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</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=5")
            .then(function(response){
                console.log(response);
            },function(error){
                console.log(error);
            })
        }
        /*
             接口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);
            }).catch(function(error){
                console.log(error);
            })
        }
    </script>
</body>
</html>

在这里插入图片描述
点击get请求:
在这里插入图片描述
点击post请求:
在这里插入图片描述

axios+vue

  • axios回调函数中的this已经改变,无法访问到data中的数据
  • 把this保存起来,回调函数中直接使用保存的this即可
  • 和本地应用最大的区别就是改变了数据来源
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取随机笑话" @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
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        var app = new Vue({
            el:"#app",
            data:{
                joke:""
            },
            methods:{
                getJoke:function(){
                    let that = this //把this保存起来,回调函数中直接使用保存的this即可
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(
                        function(res){
                            console.log(res)
                            that.joke = res.data
                        },
                        function(err){
                            console.log(err)
                        }
                    )
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

分类: Vue

0 条评论

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。