Axios异步通信


官方文档页面：http://www.axios-js.com/docs/



axios cdn 引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

data.json:

{
  "name":"一键搜索",
  "url": "https://www.baidu.com/",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "狂神",
      "url": "https://www.kuangstudy.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

第一个axios程序：

<body>

<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <a v-bind:href="info.url">{{info.url}}</a>
</div>


<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm=new Vue({
    el: "#app",
      data(){
        return{ //请求的返回参数格式，必须要与json字符串一样
            info:{
                name: null,
                url:null,
                address:{
                    street:null,
                    city:null,
                    country:null
                }
            }
        }
      },
    mounted() { //钩子函数，链式编程 es6新特性
        axios.get('data.json').then(response=>this.info=response.data)
    }
  });
</script>

</body>




posted @ 2022-03-04 09:39  卡卡发  阅读(38)  评论(0)    收藏  举报