promise快速掌握与全局错误捕获

promise作为JavaScript中处理异步任务的api，真的非常好用，这里简单分享下个人学习的一些demo，以便快速理解。

promise具体概念就不多说了，可参考MDN文档

demo:

          // 当没写catch 则会捕获，写了catch则不会捕获
            window.addEventListener("unhandledrejection", (event) => {
                console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
                event.preventDefault(); // 增加阻止默认事件，阻止页面报错
                // 通过addEventListener绑定的事件，不能通过return false来阻止默认行为
            });

         
            let p0 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("p0 success");
                }, 1000);
            });
            let p1 = new Promise((resolve, reject) => {
                resolve("p1 success");
            });

            let p2 = new Promise((resolve, reject) => {
                resolve("p2 success");
            });

            let p3 = Promise.reject("失败");
 　　　 // promise.all  全部成功  settimeout
            Promise.all([p0, p1])
                .then((result) => {
                    console.log(result); // ['p0 success', 'p1 success']
                })
                .catch((error) => {
                    console.log(error);
                });

             // promise.all  全部成功
            Promise.all([p1, p2])
                .then((result) => {
                    console.log(result); // ['p1 success', 'p2 success']
                })
                .catch((error) => {
                    console.log(error);
                });
            // promise.all  有一个失败
            Promise.all([p1, p3, p2])
                .then((result) => {
                    console.log(result); // 不会走到这里
                })
                // catch是用来捕获promise错误
                .catch((error) => {
                    console.log(error); // 仅 打印 '失败'
                });
              // promise.all  有一个失败，错误捕获写在 then第二个参数里
            Promise.all([p1, p3, p2]).then(
                (result) => {
                    console.log(result); // 不会走到这里
                },
                (error) => {
                    console.log(error); // 仅 打印 '失败'
                }
            );
            // promise.allSettled
            Promise.allSettled([p0, p1])
                .then((result) => {
                    console.dir(result); // [{status: 'fulfilled', value: 'p0 success'},{status: 'fulfilled', value: 'p1 success'}]
                })
                .catch((error) => {
                    console.log(error);
                });


            let p5 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("p5 success");
                }, 1000);
            });

            let p6 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject("p6 failed");
                }, 1500);
            });
            //  Promise.race
            Promise.race([p5, p6])
                .then((result) => {
                    console.log(result); // 仅打印p5 success
                })
                .catch((error) => {
                    console.log(error);
                });

            let p7 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("p7 success");
                }, 1500);
            });

            let p8 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject("p8 failed");
                }, 1000);
            });

            Promise.race([p7, p8])
                .then((result) => {
                    console.log(result);
                })
                .catch((error) => {
                    console.log(error); // 仅打印 p8 failed
                });

 

参考文档：

https://www.jianshu.com/p/7e60fc1be1b2

https://blog.csdn.net/tl18382950497/article/details/114946606