Vue 基础进阶

最新推荐文章于 2024-07-23 21:14:28 发布

LuckyGuyy

最新推荐文章于 2024-07-23 21:14:28 发布

阅读量243

点赞数

分类专栏： Vue 前端

本文链接：https://blog.csdn.net/qq_36821220/article/details/109592249

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

axios基本使用

axios：功能强大的网络请求库(基于ajax)
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
sxios.post(地址，{key:value,key:value}).then(function(response){},function(err){})

	<!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <!-- 
        axios必须先导入才可以使用
        使用get或post方法即可发送对应的请求
        then方法中的回调函数会在请求成功或失败时触发
        通过回调函数的形参可以获取响应内容，或错误信息
        https://github.com/axios/axios
     -->
     <input type="button" value="get请求" class="get">
     <input type="button" value="post请求" class="post">
     <script>
         document.querySelector(".get").onclick = function(){
             axios.get("https://autumnfish.cn/api/joke/list0000?num=6")
             .then(function(response){
                 console.log(response);
             },function(err){
                 console.log(err);
             })
         }
         document.querySelector(".post").onclick = function(){
             axios.post("https://autumnfish.cn/api/user/reg000",{username:"盐焗西蓝花"})
             .then(function(response){
                 console.log(response);
             },function(err){
                 console.log(err)
             })
         }
     </script>
</body>

axios+vue

	<!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--1. 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        axios回调函数中的this已经改变，无法访问到data中数据
        把this保存起来，回调函数中直接使用保存的this即可
        和本地应用的最大区别就是改变了数据来源
     -->
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function(){
                    var that = this;//**********
                    axios.get("https://autumnfish.cn/api/joke").then(
                        function(response){
                            // console.log(response.data);
                            that.joke = response.data;//********
                        },function(err){}
                    )
                }
            }
        })
    </script>
</body>

LuckyGuyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 基础进阶

axios基本使用axios：功能强大的网络请求库(基于ajax)axios.get(地址?key=value&key2=values).then(function(response){},function(err){})sxios.post(地址，{key:value,key:value}).then(function(response){},function(err){})  <script src="https:
复制链接

扫一扫

专栏目录