准备工作
先准备一个 Demo 页面，使用 npx vite 本地运行： http://localhost:5173/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="handleClick()">click</button>
<script>
window.addEventListener('unhandledrejection', (evt) => {
console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
})
function handleClick() {
// TODO
}
</script>
</body>
</html>
case1：直接reject，会触发unhandledrejection
function handleClick() {
new Promise((resolve, reject) => {
reject('this is reject reason ')
})
}
case2: 加上.then 第二个回调，不会触发unhandledrejection
function handleClick() {
new Promise((resolve, reject) => {
reject('this is reject reason ')
}).then((val) => {
console.log('val: ', val)
}, (err) => {
console.log('err: ', err)
})
}
case3: 加上.catch，不会触发 unhandledrejection
function handleClick() {
new Promise((resolve, reject) => {
reject('add catch ')
}).catch((err) => {
console.log('err: ', err)
})
}
case4: 加上try...catch呢？不影响，还是会触发 unhandledrejection
function handleClick() {
try {
new Promise((resolve, reject) => {
reject('add try catch ')
})
} catch (error) {
console.log('error: ', error)
}
}
case5: 先throw error，再resolve呢？ 会触发 unhandledrejection
注意：这个错误会被 unhandledrejection 捕获，而不会被 try...catch 捕获
function handleClick() {
try {
new Promise((resolve, reject) => {
throw new Error('this is a throw error')
resolve('add try catch ')
})
} catch (error) {
console.log('error: ', error)
}
}
case6: 先resolve，再 throw error 呢？ 不会触发
function handleClick() {
try {
new Promise((resolve, reject) => {
resolve('add try catch ')
throw new Error('this is a throw error')
})
} catch (error) {
console.log('error: ', error)
}
}
