使用js和vue两种方法实现对axios的get获取

最新推荐文章于 2024-05-16 10:23:00 发布

Flandre3569

最新推荐文章于 2024-05-16 10:23:00 发布

阅读量369

点赞数

文章标签： javascript vue ajax

本文链接：https://blog.csdn.net/weixin_54741091/article/details/113868594

版权

使用JS和Vue对axios实现get获取

java script实现get（另加post的实现）：

<body>
    <input type="button" value="get请求" id="get">
    <input type="button" value="post请求" id="post">

    <!-- axios的导入包 -->
    <script crossorigin="anonymous" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" src="http://lib.baomitu.com/axios/0.21.1/axios.min.js"></script>

    <script>
        var get=document.querySelector('#get');
        var post=document.querySelector('#post');

        //用axios里面的get请求获取三个笑话
        get.addEventListener('click',function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function(response){
                console.log(response);
                //如果输入src有误，则打印错误信息
            },function(err){
                console.log(err);
            })
        })

        //用axios里面的post请求注册一个名字
        post.addEventListener('click',function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"小明"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        })
    </script>
</body>

Vue对get的实现：

<body>
    <div id="get">
        <input type="button" value="获取笑话" @click="fn">
        <p>{{ joke }}</p>
    </div>

	//axios导入包
    <script crossorigin="anonymous" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" src="http://lib.baomitu.com/axios/0.21.1/axios.min.js"></script>
    //Vue导入包
    <script crossorigin="anonymous" integrity="sha512-YXLGLsQBiwHPHLCAA9npZWhADUsHECjkZ71D1uzT2Hpop82/eLnmFb6b0jo8pK4T0Au0g2FETrRJNblF/46ZzQ==" src="http://lib.baomitu.com/vue/2.6.12/vue.js"></script>


    <script>
        var get=new Vue({
            el:"#get",
            data:{
                joke:"好笑的笑话"
            },
            methods:{
                fn:function(){
                    var that=this;
                    //从axios中获取笑话
                    axios.get("https://autumnfish.cn/api/joke")
                    //将笑话展示在页面中，而不是在控制台上
                    .then(function(response){
                        that.joke=response.data;
                    },function(err){
                    //如果输入的src有误，则把错误信息打印出来
                        that.joke=err.data;
                    })
                }
            }
        })
    </script>

</body>