欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue学习--Axios异步通信

程序员文章站 2022-07-12 19:17:05
...

什么是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>
相关标签: Vue vue