一. Ajax介绍
Ajax：Asyncharonous JavaScript And Xml，异步的JavaScript和XML(Extensible Markup Language 可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构)
作用：
(1) 数据交换 通过Ajax可以给服务器发送请求，并获取服务器响应的数据
(2) 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等；
二. Axios
1. 介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发
2. 官网：https://www.axios-http.cn/
3.步骤：
(1) 引入Axios的js文件(参照官网)
<!-- 1. 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>(2) 使用Axios发生请求，并获取响应结果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax入门</title>
</head>
<body></body>
<!-- 1. 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>// 使用Axios发生请求，并获取响应结果
axios({// 配置对象//请求方式 GET/POSTmethod:'get',//请求路径url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',//POST 请求参数// data:{// name:'张三',// age:18// },//get请求参数 或者直接拼到URL后面params:{name:'张三',age:18 }
}).then((result) =>{// 响应结果console.log(result.data);
}).catch((error) =>{// 响应失败alert.log(error);
})
</script>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax入门-Axios</title>
</head>
<body><input type="button" value="获取数据-GET" id="btnGet"><input type="button" value="获取数据-POST" id="btnPost"></body>
<!-- 1. 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>//发送Get请求document.querySelector('#btnGet').addEventListener( 'click', () =>{axios({method:'GET',//请求路径并拼接参数 url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list'}).then((result) =>{console.log(result.data);}).catch((error) =>{alert.log(error);})})//发送Post请求document.querySelector('#btnPost').addEventListener('click', () =>{axios({method:'post',url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update'//Post请求参数// data:{// type:'social'// }}).then((result) =>{console.log(result.data);}).catch((error) =>{alert.log(error);}) })
</script>
</html>
三. Axios-请求方式别名
为了方便起见，Axios已经为所有支持的请求方法提供了别名
格式：axios.请求方式(url [, data[, config]])
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax入门-Axios简化</title>
</head>
<body><input type="button" value="获取数据-GET" id="btnGet"><input type="button" value="获取数据-POST" id="btnPost"></body>
<!-- 1. 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>//发送Get请求document.querySelector('#btnGet').addEventListener('click', () =>{//axios简化axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) =>{console.log(result.data);}).catch((error) =>{alert.log(error);})})//发送Post请求document.querySelector('#btnPost').addEventListener('click', () =>{//axios简化axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update','name=韦一笑').then((result) =>{console.log(result.data);}).catch((error) =>{alert.log(error);})
}) </script>
</html>四. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios案例</title>
</head>
<body><div id="container"><hr></hr>{{searchFrom}}<form class="search-from"><label for="name">姓名</label><input type="text" name="name" id="name" v-model="searchFrom.name" placeholder="请输入姓名"><label for="gender">性别</label><select name="gender" id="gender" v-model="searchFrom.gender"><option value="1">男</option><option value="2">女</option><option value="3">未知</option></select><button type="button" v-on:click="search">查询</button><button type="button" @click="clear">重置</button></form><hr><table border="1" style="width: 50%;height: 50%;"><thead><tr><th>编号</th><th>姓名</th><th>性别</th><th>头像</th></tr><tbody><tr v-for="(item,index) in list" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td><!-- v-if 控制--><span v-if="item.gender==1">男</span><span v-else-if="item.gender==2">女</span><span v-else>未知</span><!-- v-show 控制--><!-- <span v-show="item.gender==1">男</span><span v-show="item.gender==2">女</span><span v-show="item.gender!=1 && item.gender!=2">未知</span> --></td><td><img class="avatar" v-bind:src="item.image" :alt="item.name"></td></tr></tbody></thead></table></div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data(){return {//封装查询条件searchFrom:{name:'',gender:''},// 数组list:[ ]}},//方法methods:{//查询search(){//简写axios.get(`https://mock.apifox.cn/m1/3083103-0-default/emps/list?name=${this.searchFrom.name}&gender=${this.searchFrom.gender}`).then((result) =>{this.list=result.data.data;}).catch((error) =>{console.log(error);})},//清空表单项数据clear(){this.searchFrom.name='';this.searchFrom.age='';this.searchFrom.gender='';this.search();}}}).mount('#container');</script>
</html>五. async & await
可以通过async、await可以让异步变为同步操作。
async就是用来声明一个异步方法，await是用来等待异步任务执行。
await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值。
//查询async search(){//简写let result = await axios.get(`https://mock.apifox.cn/m1/3083103-0-default/emps/list?name=${this.searchFrom.name}&gender=${this.searchFrom.gender}`);this.list=result.data.data;},六. Vue生命周期
上述代码会在页面刷新时清空数据(列表展示为空)，需要调用钩子方法来加载页面。
生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)
生命生命周期方法：与data平级
| 状态 | 阶段周期 |
| beforCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 挂载完成 |
| beforeUpdate | 数据更新前 |
| updated | 数据更新后 |
| beforeUnmount | 组件销毁前 |
| unmounted | 组件销毁后 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue生命周期</title>
</head>
<body><div id="container"><hr></hr>{{searchFrom}}<form class="search-from"><label for="name">姓名</label><input type="text" name="name" id="name" v-model="searchFrom.name" placeholder="请输入姓名"><label for="gender">性别</label><select name="gender" id="gender" v-model="searchFrom.gender"><option value="1">男</option><option value="2">女</option><option value="3">未知</option></select><button type="button" v-on:click="search">查询</button><button type="button" @click="clear">重置</button></form><hr><table border="1" style="width: 50%;height: 50%;"><thead><tr><th>编号</th><th>姓名</th><th>性别</th><th>头像</th></tr><tbody><tr v-for="(item,index) in list" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td><!-- v-if 控制--><span v-if="item.gender==1">男</span><span v-else-if="item.gender==2">女</span><span v-else>未知</span><!-- v-show 控制--><!-- <span v-show="item.gender==1">男</span><span v-show="item.gender==2">女</span><span v-show="item.gender!=1 && item.gender!=2">未知</span> --></td><td><img class="avatar" v-bind:src="item.image" :alt="item.name"></td></tr></tbody></thead></table></div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data(){return {//封装查询条件searchFrom:{name:'',gender:''},// 数组list:[ ]}},//生命周期 钩子函数mounted(){//页面加载完成之后 发送ajax请求this.search();},//方法methods:{//查询async search(){//简写let result = await axios.get(`https://mock.apifox.cn/m1/3083103-0-default/emps/list?name=${this.searchFrom.name}&gender=${this.searchFrom.gender}`);this.list=result.data.data;},//清空表单项数据clear(){this.searchFrom.name='';this.searchFrom.age='';this.searchFrom.gender='';this.search();}}}).mount('#container');</script>
</html>