javaScript之async-await及try...catch

最新推荐文章于 2024-06-14 18:15:00 发布

我在人间贩卖青春

最新推荐文章于 2024-06-14 18:15:00 发布

阅读量838

点赞数

分类专栏： javaScript 文章标签：前端 javascript es6/es7

本文链接：https://blog.csdn.net/weixin_44178305/article/details/110721336

版权

javaScript 专栏收录该内容

49 篇文章 5 订阅

订阅专栏

在ES7更新了基于promise的同步改写和异步改写，async 函数和 await 来改造promise。

ES6 promise

  const p1 = function myp1() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve("p1");
            }, 1000)
        })
    }
    const p2 = function myp2() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve("p2");
            }, 1000)
        })
    }
    // 链式调用
    p1().then(res=>{
        console.log(res);  //p1
        return p2();
    }).then(res=>{
        console.log(res);  //p2
    }).catch(err=>{
        console.log(err);
    })

ES7 async-await及try…catch

async function asyncFn() {
    try {
        let res1 = await p1();
        console.log(res1);   //p1
        let res2 = await p2();
        console.log(res2)  //p2
    }catch(err){
        console.log(err);
    }
 
}
asyncFn();

通过async-await实现小方块运动运动一周

<!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>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    function move(ele, target, direction) {
        return new Promise((resolve) => {
            function fn() {
                let start = parseInt(window.getComputedStyle(ele, null)[direction]);
                let num = (target - start) / Math.abs((target - start));
                let speed = 5 * num;
                start += speed;
                if (Math.abs(target - start) < 5) {
                    resolve("运动完成");
                } else {
                    setTimeout(() => {
                        ele.style[direction] = start + "px";
                        // 递归
                        fn();
                    }, 20)
                }
            }
            fn();
        })
    }
    async function asyncFn(){
        let mydiv = document.querySelector(".box");
        try{
            await move(mydiv, 300, "left");
            await move(mydiv, 300, "top");
            await move(mydiv, 0, "left");
            await move(mydiv, 0, "top");
        }catch(err){
            console.log(err);
        }
    }
    asyncFn();
</script>
</html>

我在人间贩卖青春

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript之async-await及try...catch

在ES7更新了基于promise的同步改写和异步改写，async 函数和 await 来改造promise。ES6 promise const p1 = function myp1() { return new Promise(resolve => { setTimeout(() => { resolve("p1"); }, 1000) }) } const.
复制链接

扫一扫

专栏目录