Vue异步通讯

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

　　从浏览器中创建XMLHttpRequests

　　从node.js创建http请求

　　支持Promise API [JS中链式编程]

　　拦截请求和响应

　　转换请求数据和响应数据

　　取消请求

　　自动转换JSON数据

使用Axios的理由

由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !
模拟一段json格式的数据

{
  "name": "weg",
  "age": "18",
  "sex": "男",
  "url":"https://www.baidu.com",
  "address": {
    "street": "文苑路",
    "city": "南京",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "cqh video",
      "url": "https://www.4399.com"
    }
  ]
}

　　使用axios要引入cdn

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

　　//注意要用到钩子函数

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">点我进入</a>
</div>
</body>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>

    var vm = new Vue({
        el: "#vue",
        //data:vm的属性
        //data():vm方法
        data(){
            return{
                //请求的返回参数,必须和json字符串一样,可以没有，但是有必须要一样
                info:{
                    name: null,
                    age: null,
                    sex: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        //钩子函数，链式编程，ES6新特性
        mounted(){
            axios
                .get('data.json')
                .then(response => (this.info = response.data))
        }
    })
</script>
</html>

 

 

　　

posted @ 2021-12-30 22:16  qwedfrgh  阅读(77)  评论(0)    收藏  举报