es6:异步函数（解决异步编程3）

最新推荐文章于 2023-02-10 09:30:36 发布

bling flower

最新推荐文章于 2023-02-10 09:30:36 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/C05230/article/details/108556380

版权

知识要点：
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>

bling flower

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6:异步函数（解决异步编程3）

知识要点：1、await只能放在async函数中。2、await后面可以是任何对象3、async函数返回的是一个Promise对象4、如果await后面的Promise状态变为reject，那么会停止整个async函数应用实例：思路：先封装三个函数，用来获取token，获取用户数据，删除用户信息//获取tokengetToken(){}//获取用户数据getUsers(){}//删除用户信息getDelete(){}function *g(){ //1.请求tok
复制链接

扫一扫