当前位置: 首页 > news >正文

Axios-入门

介绍

Axios对原生Ajax进行了封装,简化书写,快速开发

官网:Axios中文文档 | Axios中文网 (axios-http.cn)

入门

1引入Axios的js文件

 <script src="js/axios.js"></script>

2使用Axios发送请求,并获取响应结果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTE-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Ajax</title><script src="js/axios.js"></script>
</head><body><input type="button" value="获取数据Get" onclick="get()"><input type="button" value="获取数据Post" onclick="post()"></body>
<script>function get(){axios({ mehod:"get",url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result=>{console.log(result);})}function post(){axios({ mehod:"post",url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data:"id=1;"}).then(result=>{console.log(result);})}</script></html>

axios({....对象信息....mehod,url(data)}).then(result)=>{}           

then后面接一个result的自定义函数

post有个而外的data

请求方式别名

改写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTE-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Ajax</title><script src="js/axios.js"></script>
</head><body><input type="button" value="获取数据Get" onclick="get()"><input type="button" value="获取数据Post" onclick="post()"></body>
<script>// function get(){//      axios({ mehod:"get",//        url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"//   }).then(result=>{//      console.log(result);//   })// }axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{console.log(result);})// function post(){//      axios({ mehod:"post",//       url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",//       data:"id=1;"//     }).then(result=>{//         console.log(result);//     })//}axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1").then(result=>{console.log(result);})</script></html>

案例:网页加载完成,调用vue生命周期的mounted()向服务器发送请求返回数据赋值遍历渲染表格

数据

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<script src="js/axios.js"></script>
<body>
<div id ="app"><table border="1"cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职时间</th><th>最后操作时间</th></tr><tr v-for="(emp,index) in emps" align="center"><th>{{index+1}}</th><th>{{emp.name}}</th><th><img : src="emp.image" width="70px" height="50px"></th><th v-if="emp.gender=1">男</th><th v-else>女</th><th>{{emp.jop}}</th><th>{{emp.entrydate}}</th><th>{{emp.updatetime}}</th></tr></table>
</div>
</body>
<script>
//定义vue对象new Vue({el:"#app",//vue接管区域data:{emps:[]},methods:{},mounted(){axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{this.emps=result.data.data;})}})
</script>
</html>

http://www.lryc.cn/news/383899.html

相关文章:

  • Python22 Pandas库
  • 不同表格式下的小文件治理方式(开源RC file/ORC/Text非事务表、事务表、Holodesk表格式..)
  • 0.7 模拟电视标准 PAL 简介
  • vue项目中封装element分页组件
  • linux下docker安装与镜像容器管理
  • 【Unity】RPG2D龙城纷争(六)关卡编辑器之角色编辑
  • 【鸿蒙】鸿蒙的Stage和 FA 有什么区别
  • JAVA小知识29:IO流(上)
  • 大学生毕业季,寄物流快递避雷指南
  • 如何提高项目风险的处理效率?5个重点
  • ZNB40 矢量网络分析仪
  • ingress代理前后端服务跨域
  • Python 使用 Thick 方式连接 Oracle Database BaseDB 23ai
  • Java操作Redis(通过Jedis)
  • JVM专题二:Java如何进行编译的
  • 道路元素位置和方向的坐标系统: 点 线 面 连接点
  • 二、Docker常用命令
  • 通过docker启动Jenkins容器报错
  • webui automatic1111上可以跑stable diffusion 3的方法
  • 基于顺序表基础实现通讯录项目
  • 加班的员工,循环的电池
  • windows安装Nacos并使用
  • 准备篇(三)网页相关知识
  • 基于SSM的医药垃圾分类管理系统
  • web 应用防火墙的作用是什么
  • 搜索框回车刷新表格(解决搜索框回车刷新页面问题)
  • 洞察用户需求,Xinstall数据统计App让你的App运营如虎添翼
  • 如何正确的报考志愿
  • go的reflect实战
  • 【学习】常用的分类网络