Promise

dragon-w

已于 2023-02-27 22:43:36 修改

阅读量181

点赞数

分类专栏： typescript 文章标签： typescript

于 2023-02-27 22:11:07 首次发布

本文链接：https://blog.csdn.net/wangjianlong/article/details/129251289

版权

typescript 专栏收录该内容

6 篇文章

订阅专栏

Promise.All()

Promise.all()关注多个Promise对象的状态变化,传入多个Promise实例，包装成一个新的Promise实例返回。

<!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>
</head>
<body>
    <script>
        //---------//
        //基本用法
        const delay=ms=>{
            return new Promise(resolve=>{
                setTimeout(resolve,ms);
            });
        }

        const p1=delay(1000).then(()=>{
            console.log("p1完成了");
            return 'p1';
        })

        const p2=delay(2000).then(()=>{
             console.log("p2完成了");
            // return p2;
           return  Promise.reject("失败了");
        })


        const p = Promise.all([p1,p2]);
        p.then(data=>{
            console.log("都成功了");
        },err=>{
            console.log("部分失败了");
        })
        
    </script>
</body>
</html>

Promise.race()的状态取决于第一个完成的Promise对象，如果第一个成功了，那最终就是成功的，如果第一个失败了，那最终就是失败的。

<!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>
</head>
<body>
    <script>
        //Promise.all()关注多个Promise对象的状态变化
        //传入多个Promise实例，包装成一个新的Promise实例返回
        //---------//
        //基本用法
        const delay=ms=>{
            return new Promise(resolve=>{
                setTimeout(resolve,ms);
            });
        }

        const p1=delay(1000).then(()=>{
            console.log("p1完成了");
            return 'p1';
        })

        const p2=delay(2000).then(()=>{
             console.log("p2完成了");
            // return p2;
           return  Promise.reject("失败了");
        })


        const p = Promise.race([p1,p2]);
        p.then(data=>{
            console.log("都成功了");
        },err=>{
            console.log("部分失败了");
        })
        
    </script>
</body>
</html>

Promise.allSettled：没有必要管第二个参数，永远都是成功的，只是忠实记录下各个promise的状态。

<!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>
</head>
<body>
    <script>
        //Promise.all()关注多个Promise对象的状态变化
        //传入多个Promise实例，包装成一个新的Promise实例返回
        //---------//
        //基本用法
        const delay=ms=>{
            return new Promise(resolve=>{
                setTimeout(resolve,ms);
            });
        }

        const p1=delay(1000).then(()=>{
            console.log("p1完成了");
            return 'p1';
        })

        const p2=delay(2000).then(()=>{
             console.log("p2完成了");
            // return p2;
           return  Promise.reject("失败了");
        })


        const p = Promise.allSettled([p1,p2]);
        p.then(data=>{
            console.log("都成功了");
        },err=>{
            console.log("部分失败了");
        })
        
    </script>
</body>
</html>

使用Promise需要注意的事项：

1.调用了resolve或者reject后，后面不推荐在编写别的代码，虽然写了也是会执行的。推荐在调用resolve或reject后，加上return，不在执行他后面的代码。

2.参数如果不是Promise对象，会将不是Promise对象的转换为Promise对象