promise（最全最干净最好用）

最新推荐文章于 2024-06-20 20:19:27 发布

Volecity

最新推荐文章于 2024-06-20 20:19:27 发布

阅读量44

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/start7000k/article/details/129824745

版权

兄弟们！直接拿下面html浏览器跑起来耍一下吧

<!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>Document</title>
    <style>
        html {
            height: 100%;
        }
        body {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: start;
        }
        .box {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background: #FF9800;
            color: #fff;
        }
    </style>
</head>
<body>
    <button class="box">  0 </button>
    <ul class="ul"></ul>
    <script>
        document.querySelectorAll('.box')[0].addEventListener('click', (e) => {
            new Promise(ajaxA).then(ajaxB).then(data => {
                append('数据接收')
            })
        })
        function append(item="null") {
            li= document.createElement("li");
            li.textContent=item
            document.querySelectorAll('.ul')[0].insertAdjacentElement("afterbegin",li); 
        }

        function ajaxA(resolve) {
            append('A开始----')
            setTimeout(() => {
            append('A结束+++++++++++++++++++++')
            resolve()
            }, Math.round(Math.random()*1000))
        }

        function ajaxB(resolve) {
            return new Promise((resolve, reject) => {
                append('B开始----')
            setTimeout(() => {
            append('B结束+++++++++++++++++++++')
            resolve()
            }, Math.round(Math.random()*1000))
            })

        }
    </script>
</body>
</html>

当你理解了原理之后，你就可以顺利成章了明白一些奇怪的写法的缘由，就知道顺理成章，也避免写法错误造成的bug