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 });
参考文档: