处理web前端异常的方式有哪些(web前端,开发技术)

")
}).catch(error=>{
console.log("捕获到异常：",error)
})

捕获到异常

有时候我们在写 Promise 可能会漏掉 catch，所以建议在全局增加一个对unhandledrejection 的监听，用来全局监听Uncaught Promise Error。

window.addEventListener("unhandledrejection",function(e){
e.preventDefault()
console.log('捕获到异常：',e);
});
newPromise((resolve,reject)=>{
reject("执行失败！")
})

捕获到异常

添加event.preventDefault(); 可以去掉控制台的异常显示信息。

5、vueerrorHandler

我们可以使用errorHandler 对 vue 组件中所抛错误的捕捉与处理。

Vue.config.errorHandler=(err,vm,info)=>{
console.error(err);
console.error(vm);
console.error(info);
}
//某个组件的mounted
consterror=newError('testerror');
error.code=-1;
throwerror;

捕获到异常

6、 react 异常捕获

React 16提供了一个内置函数componentDidCatch，使用它可以非常简单的获取到react下的错误信息。

componentDidCatch(error,info){
console.log(error,info);
}

除此之外，也可以使用错误边界error boundary，此处不展开。

7、跨域

资源跨域可以为script标签添加crossOrigin属性。

<scriptsrc="http://localhost:3000/main.js&quot;crossorigin&gt;&lt;/script&gt;

也可以动态添加 JavaScript 脚本

constscript=document.createElement('script');
script.crossOrigin='anonymous';
script.src=url;
document.body.appendChild(script);

四、总结

处理异常方式说明try-catch可预见、可疑区域window.onerror全局捕获 JavaScript 异常window.addEventListener全局捕获静态资源异常Promise catch捕获 Promise 异常，也可使用unhandledrejection 进行全局捕获vueerrorHandler捕获 vue 异常react 异常捕获捕获 react 异常crossOrigin解决 JavaScript 脚本跨域相信大家对“处理web前端异常的方式有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。