js错误处理

前言：之所以要进行错误的处理，是因为js是单线程的程序，如果程序一旦发生了异常，则会造成主题应用程序发生异常，进而引发生产事故。

局部异常捕获

try catch（只支持同步异常，捕获不到异步异常）

 // 其中catch和finally两者中只有一个是必需的
 try {
   // 可能出现异常的代码
 } catch(error){
   // 进行错误处理 
 } finally {
 ​
 }

全局异常捕获

配置vue的全局拦截器

 // main.js全局文件进行配置
 app.config.errorHandler = (err) => { 
     navigator.sendBeacon(url, {error: error.message, text: 'vue运行异常' })
 }

JS异常与静态资源加载异常

 window.addEventListener(
   "error",
   function (event) {
     if (event.target?.src || event.target?.href) {
       // 资源加载错误
     } else {
       // 执行错误
     }
   }
 );
 ​
 window.addEventListener(
   "unhandledrejection",
   function (event) {
     // 未被捕获的 Promise 错误
   }
 );

配置axios响应拦截器（请求错误捕获）

 const axiosapi = axios.create({
     baseURL:'http://localhost:3000',
     timeout:5000,//连接超时
 });
  
 //2. 定义请求拦截器:给所有请求都带上token
 axiosapi.interceptors.request.use((req)=>{
     let token = sessionStorage.getItem('Auth');//获取页面存储的token
     if (token) {
         req.headers['Auth'] = token;//将token添加至请求头对象的Auth属性中
     }
     return req;
 },(error)=>{//返回错误的信息
     return Promise.reject(error);
 });
  
 //3. 定义响应拦截器: 对服务器响应客户端的数据进行统一处理
 axiosapi.interceptors.response.use(res=>{
     //3.1 对响应数据进行处理
     let data = res.data;
     let code = data.code;
     if(code === 200){
         //请求成功时,将res.data对象返回给响应对象
         return data;
     } else {
         return Promise.reject(data);
     }
 },(error)=>{
     return Promise.reject(error);
 })