Vue学习06——axios的使用

最新推荐文章于 2023-09-04 14:00:55 发布

Duing_

最新推荐文章于 2023-09-04 14:00:55 发布

阅读量244

点赞数

分类专栏： Vue 文章标签： axios

本文链接：https://blog.csdn.net/J_Du_pro/article/details/108472131

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述

Duing_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习06——axios的使用

axiosaxios必须先导入才可以使用使用get或post方法即可发送对应的请求then方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容，或错误信息axios文档传送门中文文档：http://www.axios-js.com/zh-cn/docs/index.htmlGitHub：https://github.com/axios/axios简单入手<!DOCTYPE html><html lang="en"><head&gt
复制链接

扫一扫

专栏目录