Axios：
介绍：Axios对原生的Ajax进行封装，简化书写，快速开发。
官网：https://www.axios-http.cn
Axios 入门：
{}是Js的对象。
get的请求参数是在URL后面？和相关参数值。
post的请求参数是在请求体中的。
成功回调函数：
js对象result，result.data就可以拿到result这个对象的data属性，data属性里面就是服务端响应回来的数据。
案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()"></body>
<script>function get(){//通过axios发送异步请求-get// axios({// method: "get",// url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"// }).then(result => {// console.log(result.data);// })axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);})}function post(){//通过axios发送异步请求-post// axios({// method: "post",// url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",// data: "id=1"// }).then(result => {// console.log(result.data);// })axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {console.log(result.data);})}
</script>
</html>打开开发者工具：
这种方式是我们项目中推荐的方法。
案例：
基于Vue及Axios完成数据的动态加载展示：
1、数据准备的URL：
2、在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面（性别1：男，2代表女）。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios-案例</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script>
</head>
<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 align="center" v-for="(emp,index) in emps"> /* 在视图中渲染展示列表数据*/<td>{{index + 1}}</td><td>{{emp.name}}</td><td><img :src="emp.image" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>new Vue({el: "#app",data: {emps:[] // 数据模型},mounted () {//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {this.emps = result.data.data; // 把获得数据给了数据模型emps})}});
</script>
</html>发送的是异步请求，从服务器获得数据，数据是json格式的，然后我们给了数据模型emps，然后在view中渲染展示这些数据，通过插值表达式等方式。
其中头像使用的是地址。
v-bind是为标签绑定属性值，再回顾下。
![[Vue-常见错误]浏览器显示Uncaught runtime errors](https://img-blog.csdnimg.cn/direct/8afee6e64cc548f29f14b90db8148361.png)
