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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-12Axios库资料:新手入门必读教程
- 2024-11-11Axios库项目实战:新手入门教程
- 2024-09-29Axios库教程:初学者必备指南
- 2024-08-29Axios库资料:新手入门指南与基本使用教程
- 2024-03-14system bios shadowed
- 2024-03-14gabios
- 2024-02-07iOS应用提交上架的最新流程
- 2024-02-06打包 iOS 的 IPA 文件
- 2023-12-07uniapp打包iOS应用并通过审核:代码混淆的终极解决方案 ?
- 2023-11-25uniapp IOS从打包到上架流程(详细简单) 原创