Vue学习--Axios异步通信

最新推荐文章于 2024-03-22 14:39:10 发布

theLuckyLong

最新推荐文章于 2024-03-22 14:39:10 发布

阅读量160

点赞数

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

本文链接：https://blog.csdn.net/theLuckyLong/article/details/115349605

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

什么是Axios

之前，前端与后端进行数据资源交互，用到的是jQuery下的Ajax。现在axios的出现，可以干之前ajax干的活。Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。
值得注意的是，axios要求浏览器中的JS版本为ECMAScript6及以上。

使用方式

可以去官网下载，也可以使用在线cdn，本文采取后者，方便内容讲解

<!--通过cdn方式引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在使用之前先交代一个事情：

Vue在渲染数据时，存在一个生命周期，只是由于网速太快，对我们开发者以及用户而言，初始化的部分仅仅是一瞬间的事，但是它是真实存在的。在这其中，有许多的“钩子函数”，就是在Vue初始化的各个阶段，可以在各个阶段节点编写函数，使之触发。
Vue生命周期中有一个mounted阶段，该阶段一般用于进行ajax请求来初始化数据，所以可以在这个阶段编写axios函数来进行调用。（注：mounted阶段，在整个实例只执行一次）

接下来我们通过一个案例来进行演示：
首先创建一个student.json文件作为数据来源：

{
  "name" : "小明",
  "age" : 18,
  "hobbies" : ["唱歌","跳舞","Rap","打篮球"],
  "homie" : [
    {
      "name" : "小华",
      "age" : 13
    },
    {
      "name" : "小李",
      "age" : 15
    },
    {
      "name" : "小建",
      "age" : 20
    },
    {
      "name" : "小蛇",
      "age" : 13
    }
  ]
}

前端调用

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Axios</title>
</head>
<style>
    [v-clock]{
        display: none; /*解决闪烁问题*/
    }
</style>
<body>
    <div id="vueApp" v-clock>
        <p>{{student.name}}</p>
        <ul>
            爱好<br/>
            <li v-for="hobby in student.hobbies">{{hobby}}</li>
        </ul>
        <ul>
            老铁们<br/>
            <li v-for="bro in student.homie">{{bro.name}}--{{bro.age}}</li>
        </ul>


    </div>

<!--通过cdn方式引入vue-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<!--通过cdn方式引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let vm = new Vue({
        el: "#vueApp",
        data(){//这是个函数对象，与data属性对象区分开
            return{
                //请求返回的参数内容要与json数据相符
                //这里只是写一个模板，用于以后接收后端传递过来的json数据
                student : {
                    name : null,
                    age : null,
                    hobbies : [],
                    homie : []
                }
            }
        },
        mounted(){//钩子函数，用于在初始化Vue对象前执行的函数
            /*
            * axios函数类似于ajax，编程方式为链式编程
            * get方法中的参数为请求资源的url
            * then()方法有点类似于成功之后的回调函数,注意JavaScript的版本要为EMS6
            * */
            axios.get('student.json').then(response=>(this.student = response.data));
        }
    });
</script>
</body>
</html>

关于解决前端闪烁的问题（前端会先显示数据模板，闪烁一下后才显示真实数据）：

在Vue作用的Dom对象上增加一个 v-clock属性

<div id="vueApp" v-clock>
	...
</div>

然后在样式表中如下定义：

<style>
    [v-clock]{/*属性选择器*/
        display: none; /*解决闪烁问题*/
    }
</style>

theLuckyLong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习--Axios异步通信

什么是Axios之前，前端与后端进行数据资源交互，用到的是jQuery下的Ajax。现在axios的出现，可以干之前ajax干的活。Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。值得注意的是，axios要求浏览器中的JS版本为ECMAScript6及以上。使用方式可以去官网下载，也可以使用在线cdn，本文采取后者，方便内容讲解<script src="https://unpk
复制链接

扫一扫

专栏目录