axios

2021/10/6 23:14:57

本文主要是介绍axios,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

axios是一个独立的项目,通常和vue一起使用,实现ajax操作

首先要引入vue.js和axios.js

其次启动后端服务以及开启跨域访问权限

    <div id="app">
        <table width="80%" align="center" border="1px">
            <tr>
                <td>name</td>
                <td>age</td>
            </tr>
            <tbody v-for="item in userList">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tbody>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定结构
            data: {//在data定义变量和初始值
                //定义变量,空数组,便于后面赋值
                userList: []
            },
            created() {
                //页面渲染之前执行
                //调用定义的方法
                this.getUserList()
            },
            methods: {
                //编写具体的方法

                //创建方法查询用户数据
                getUserList() {

                    //使用axios发ajax请求
                    //axios.请求方式("请求的接口的路径").then(箭头函数).catch(箭头函数)
                    axios.get('http://localhost:8080/user')
                        .then(response => {
                            //response就是请求返回的数据
                            console.log(response)//可以去控制台看得到的数据的结构
                            //通过response获取具体数据赋值给自己定义的空数组
                            this.userList = response.data.data.items
                            //console.log(this.userList)测试获得的数据
                        })//请求成功执行then方法

                        .catch(error => {

                        })//请求失败执行catch方法
                }

                //箭头函数 变量名=>{}
            }

        })
    </script>



这篇关于axios的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程