学习vue中axios的简单使用

最新推荐文章于 2024-06-15 21:25:42 发布

程橙宸

最新推荐文章于 2024-06-15 21:25:42 发布

阅读量201

点赞数

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/m0_47086280/article/details/124460881

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这里是axios的基本使用

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

<script>

    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)  })
        //这里是get请求的格式，分别是正确的和错误的

    //    这里是一个接口，请求方法是get，参数是num，笑话的条数

    }

    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>

这里是组合起来的基本使用

<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>

    // document.querySelector(".get").onclick=function () {
    //     axios.get("https://autumnfish.cn/api/joke").then(function (response) {
    //         console.log(response);
    //     },function (err) {console.log(err)  })
    //     //这里是get请求的格式，分别是正确的和错误的
    //
    //     //    这里是一个接口，请求方法是get，参数是num，笑话的条数
    //
    // }

    var app=new Vue({
        el:"#app",
        data:{
            joke:"好玩"
        },
        methods:{
            getJoke:function () {

                var that=this;
                //axios回调函数中的this已经改变，取法访问到data中数据，先把this保存起来

                axios.get("https://autumnfish.cn/api/joke")
                    .then(function (response) {
                        that.joke=response.data;
            },function (err) {
                    console.log(err)
                } )
            }
        }
    })

</script>

</body>

注意：

然后需要注意javascript中的this，

this对象在程序中随时会改变，而var that=this之后，that没改变之前仍然是指向当时的this，这样就不会出现找不

到原来的对象。

程橙宸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习vue中axios的简单使用

这里是axios的基本使用<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script> document.querySelector(".get").onclick=function () { axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function (response) {
复制链接

扫一扫

专栏目录