Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中

vue.js推荐使用axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请求</title>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-clock>
    <div> {{info.name}}</div>
    <div>來自：{{info.address.country}} <br/>
        城市：{{info.address.city}}<br/>
        小區：{{info.address.street}}
    </div>
    <a v-bind:href="info.url">點擊我，驚喜！</a>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: app,//data 属性和 方法
        data() {  //data方法 接收return  回来的
            return {//放回的參數必須和json字符串一樣
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted() {  //钩子函数 链式编程
             axios.get('../data.json').then(response=>(console.log(response.data)))
            axios.get('../data.json').then(response => (this.info = response.data))
        }
    })
</script>
</body>
</html>

json字符串

{
  "name": "IJun",
  "url": "https://image.so.com/view?ie=utf-8&src=hao_360so&q=meinv&correct=%E7%BE%8E%E5%A5%B3&ancestor=list&cmsid=f9defe03809ba91aff46833566e7a93a&cmras=1&cn=0&gn=0&kn=50&crn=0&bxn=0&fsn=110&cuben=0&pornn=0&manun=50&adstar=0&clw=278#id=992673ad6ac124dcba41c62a3118a5f4&currsn=0&ps=134&pc=134",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "滨湖",
    "city": "安徽合肥",
    "country": "中国"
  },
  "links": [
    {
      "name": "12",
      "url": "11"
    },
    {
      "name": "13",
      "url": "14"
    },
    {
      "name": "15",
      "url": "16"
    }
  ]
}

　　

posted @ 2021-02-05 14:38  iJunHello  阅读(275)  评论(0)    收藏  举报