知识要点:
1、await只能放在async函数中。
2、await后面可以是任何对象
3、async函数返回的是一个Promise对象
4、如果await后面的Promise状态变为reject,那么会停止整个async函数
应用实例:
思路:
先封装三个函数,用来获取token,获取用户数据,删除用户信息
//获取token
getToken(){
}
//获取用户数据
getUsers(){
}
//删除用户信息
getDelete(){
}
function *g(){
//1.请求token
getToken();
yield 1;
//2.请求user
getUsers();
yield 2;
//请求delete
getDelete();
return 3
}
async function fn(){
//请求token
let token = await gettoken()
// 根据token去拿用户信息.
let id = await getusers(token);
// 根据token以及拿到的用户信息删除想要删除的用户信息
let other = await delete(id)
// 根据info去拿其他信息
}
// 最后我们再调用这个函数
fn()
代码详情:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border-collapse: collapse;
margin: 30px auto;
}
table th,table td{
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
span:hover{
cursor: pointer;
}
</style>
<script src="./jquery-3.5.0/jquery-3.5.0.min.js"></script>
<script>
$(function(){
//1.获取token
var baseUrl='http://182.92.83.218:7788';
async function getToken(){
//获取用户名和密码
var obj={
"password": "123321",
"username": "admin1"
}
//发送登录请求,获取token
$.ajax({
url:baseUrl+'/user/login',
type:'POST',
contentType: "application/json; charset=utf-8",
data:JSON.stringify(obj),
success:function(data){
console.log(data.data.token);
sessionStorage.setItem("token",data.data.token)
}
});
}
var token=sessionStorage.getItem("token")
//2.获取users
async function getUsers(){
$.ajax({
url:baseUrl+'/baseUser/findAll',
type:'GET',
headers:{
"Authorization":token
},
success:function(data){
console.log(data);
var users=data.data;
users.forEach(function(item,index){
var tr=$(`<tr>
<td>`+item.id+`</td>
<td>`+item.username+`</td>
<td>`+item.realname+`</td>
<td>`+item.politicsStatus+`</td>
<td>`+item.gender+`</td>
<td>`+item.status+`</td>
<td>`+item.telephone+`</td>
<td>
<span>删除</span>
</td>
</tr`);
$("tbody").append(tr);
});
}
})
}
// getUsers()
//3.delete
async function getDelete(){
$('tbody').on('click','span',function(){
//1.获取id
var id=$(this).parents('tr').children().eq(0).text();
console.log(id);
//2.发送删除请求
$.ajax({
url:baseUrl+'/baseUser/deleteById?id='+id,
type:'GET',
headers:{
"Authorization":token
},
success:function(data){
console.log(data);
if(data.status==200){
//清空tbody中的tr
$('tbody').empty();
//3.刷新页面
getUsers()
}
}
})
})
}
async function fn(){
let token=await getToken();
let id=await getUsers(token);
let other=await getDelete(id);
}
fn();
})
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>姓名</th>
<th>角色</th>
<th>性别</th>
<th>状态</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>