Vue2学习记录01——Axios异步通信

概述

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

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

vue生命周期图

在vue中使用axios

发送请求

使用mounted这个钩子函数来实现

data.json

{
  "name": "wcy",
  "address": "你猜我在哪",
  "age": "18",
  "hobbies": [
      "乒乓球", "撸代码", "看小姐姐"
  ]
}

<script>

    let vm = new Vue({
        el: "#app",
        data() {
            return {
                info:""
            }
        },
        mounted(){
        	// 发送请求
            axios.get("./data.json").then(response => (console.log(response.data)))
        }
    })
</script>

渲染获取到的值

<div id="app">
    <p>{{info.name}}</p>
    <p>{{info.address}}</p>
    <p v-for="hobby in info.hobbies">{{hobby}}</p>
</div>

<script>

    let vm = new Vue({
        el: "#app",
        // data方法必须返回一个对象
        data() {
            return {
                info:""
            }
        },
        mounted(){
            // this.info = response.data
            // 将获取到的值赋给info
            axios.get("./data.json").then(response => (this.info = response.data))
        }
    })

</script>