Vue.js-Axios异步通信

Axios是一个开源的可以用在浏览器和NodeJS的异步通信框架，它的主要作用是实现AJAX异步通信，功能如下：

从浏览器中创建XMLHttpRequests
从Node.js创建HTTP请求
支持Promise API
拦截请和响应
转换请求数据和响应数据
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

data.json

{
  "name": "故宫",
  "address": {
    "street": "东城区景山前街4号",
    "city": "北京市",
    "country":"中国"
  },
  "url": "https://baike.baidu.com/item/%E5%8C%97%E4%BA%AC%E6%95%85%E5%AE%AB/345415?fr=aladdin",
  "page": 1
}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
</head>
<body>
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address.country}}</div>
    <div>{{info.address.city}}</div>
    <div>{{info.address.street}}</div>
    <a v-bind:href="info.url">点击了解更多</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el: '#app',
        data(){
            return{
                info:{
                    name: null ,
                    address: {
                        street:null,
                        city:null,
                        country:null
                    },
                    url: null
                },

            }
        },
        mounted(){
            axios.get('data.json').then(response=>(this.info=response.data));
        }
    });
</script>
</body>
</html>

Vue.js-Axios异步通信

推荐阅读更多精彩内容