11. Vue Axios异步通信

11. Vue Axios异步通信

什么是axios?

Axios是一个开源的可以在浏览器端和Node.js的异步通信框架,主要功能是实现AjAx的异步通信。

他不属于vue里面的,而是经常与vue一起使用实现ajax异步通信

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:


Features

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

​ Axios基本格式

<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
    <div id="app">
    
    div>

    <script>
        new Vue({
            el: "#app",
            //在data中定义变量和初始值
            data:{
                
            },
            //调用定义的方法,在页面渲染前执行
            created () {
                
            },
            //编写具体的方法
            methods: {
                
            }   
        })
        
    script>
body>

​ 第一步:伪造json数据

{
    "success":"true",
    "code":20000,
    "message":"成功",
    "data": {
       "items": [
            {"name":"xuan","age":18},
            {"name":"jieshen","age":30},
            {"name":"xuyuhao","age":12}
        ]
    }
}

​ 第二步:编写代码拿到数据

  • 在then中通过Response拿到数据赋值给到data中定义的空数组,然后在页面展示模块将数据遍历取出来
  • 在created方法中要调用该方法才能在页面渲染前执行
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    <div id="app">
        
        <h3>{{userList}}h3>
        <table>
            <tr v-for="user in userList">
                <td>{{user.name}}td>
                <td>{{user.age}}td>
            tr>
        table>
    div>

    <script>
        new Vue({
            el: "#app",
            //在data中定义变量和初始值
            data:{
                //定义变量值是一个空的数组,对应data.json中数据
                userList:[]
            },
            //调用定义的方法,在页面渲染前执行
            created () {
                this.getUserList()
            },
            //编写具体的方法
            methods: {
                //创建一个方法查询所有用户的数据
                getUserList(){
                    //使用axios发送ajax请求
                    //axios.(提交方式 接口的请求路径).then().catch()
                    axios.get("data.json")
                        //请求成功后执行then方法
                        .then(Response => {
                            //通过Response获取数据赋值给到开始定义的空数组
                            this.userList=Response.data.data.items
                            console.log(this.userList)
                        }) 
                        //请求失败后执行catch方法
                        .catch(Error => {

                        })
                }
            }   
        })
        
    script>
body>

你可能感兴趣的:(Vue,基础学习,vue,ajax,axios,html)