返回顶部
首页 > 资讯 > 前端开发 > VUE >如何处理vue项目异常
  • 201
分享到

如何处理vue项目异常

2024-04-02 19:04:59 201人浏览 独家记忆
摘要

这篇文章主要介绍如何处理Vue项目异常,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!背景你还在为处理Uncaught (in promise) ReferenceError烦恼吗?你

这篇文章主要介绍如何处理Vue项目异常,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

背景

  • 你还在为处理Uncaught (in promise) ReferenceError烦恼吗?

  • 你还在为捕获异常反复的写try catch吗?

  • 你还在为每一个promise写catch吗?

是时候一站式统一处理异常!!!(针对vue项目)

全局异常捕获

Vue.config.errorHandler = function (err, vm, info) {
 // 指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和 Vue 实例。
 
 // handle error
 // `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
 // 只在 2.2.0+ 可用 
}

注意:面对异常处理,同步异常和异步异常应该区别对待分别处理。

vue核心源码剖析

通过阅读源码看一下vue是如何将Vue.config.errorHandler接口暴露给使用者。

同步异常处理方案

// 定义异常处理函数,判断用户是否自定义Vue.config.errorHandler,定义则直接调用,未定义执行vue本身异常处理。
function globalHandleError(err, vm, info) {
 if (Vue.config.errorHandler) {
  try {
   return config.errorHandler.call(null, err, vm, info)
  } catch (e) {
   logError(e, null, 'config.errorHandler');
  }
 }
 logError(err, vm, info);
}
try {
 // vue正常执行代码被包裹在try内,有异常会调用globalHandleError
} catch (e) {
 globalHandleError(e, vm, '对应信息');
}

异步异常处理方案

// 定义异步异常处理函数,对于自身没有捕获异常的promise统一执行catch
function invokeWithErrorHandling(
 handler,
 context,
 args,
 vm,
 info
) {
 var res;
 try {
  res = args ? handler.apply(context, args) : handler.call(context);
  if (res && !res._isVue && isPromise(res) && !res._handled) {
   res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); });
   // 异步代码例如promise可以统一为其定义Promise.prototype.catch()方法。
   res._handled = true;
  }
 } catch (e) {
  handleError(e, vm, info);
 }
 return res
}

// 所有的钩子函数调用异常处理函数
function callHook(vm, hook) {
 var handlers = vm.$options[hook];
 // 为所有钩子增加异常处理
 var info = hook + " hook";
 if (handlers) {
  for (var i = 0, j = handlers.length; i < j; i++) {
   invokeWithErrorHandling(handlers[i], vm, null, vm, info);
  }
 }
}

知识延伸

// vue接口是能处理同步异常以及部分钩子中的异步异常,对于方法中的异常无法有效处理,我们可以仿照源码增加方式中的异步异常处理,避免为每一个promise写catch
Vue.mixin({
 beforeCreate() {
  const methods = this.$options.methods || {}
  Object.keys(methods).forEach(key => {
   let fn = methods[key]
   this.$options.methods[key] = function (...args) {
    let ret = fn.apply(this, args)
    if (ret && typeof ret.then === 'function' && typeof ret.catch === "function") {
     return ret.catch(Vue.config.errorHandler)
    } else { // 默认错误处理
     return ret
    }
   }
  })
 }
})

完整代码

下面是全局处理异常的完整代码,已经封装成一个插件

errorPlugin.js


const errorHandler = (error, vm, info) => {
 console.error('抛出全局异常')
 console.error(vm)
 console.error(error)
 console.error(info)
}
let GlobalError = {
 install: (Vue, options) => {
 
  Vue.config.errorHandler = errorHandler
  Vue.mixin({
   beforeCreate() {
    const methods = this.$options.methods || {}
    Object.keys(methods).forEach(key => {
     let fn = methods[key]
     this.$options.methods[key] = function (...args) {
      let ret = fn.apply(this, args)
      if (ret && typeof ret.then === 'function' && typeof ret.catch === "function") {
       return ret.catch(errorHandler)
      } else { // 默认错误处理
       return ret
      }
     }
    })
   }
  })
  Vue.prototype.$throw = errorHandler
 }
}
export default GlobalError

使用

// 在入口文件中引入
import ErrorPlugin from './errorPlugin'
import Vue from 'vue'
Vue.use(ErrorPlugin)

写在最后

增加全局异常处理有助于

  • 提高代码健壮性

  • 减少崩溃

  • 快速定位bug

以上是“如何处理vue项目异常”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: 如何处理vue项目异常

本文链接: https://www.lsjlt.com/news/79184.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何处理vue项目异常
    这篇文章主要介绍如何处理vue项目异常,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!背景你还在为处理Uncaught (in promise) ReferenceError烦恼吗?你...
    99+
    2024-04-02
  • 如何在java项目中抛出一个异常处理
    本篇文章为大家展示了如何在java项目中抛出一个异常处理,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。java 抛出异常处理的方法为了避免调用的人不知道有异常,才抛出异常的,所以是谁掉用的久在哪里处...
    99+
    2023-05-31
    java ava 目中
  • 如何在SpringBoot项目里进行统一异常处理
    目录1、处理前2、进行系统异常全局处理3、进行自定义异常处理效果前言: 需要了解的知识: @ControllerAdvice的作用 1、处理前 异常代码: @ApiOperatio...
    99+
    2024-04-02
  • Springboot项目中如何实现异常处理自定义
    这期内容当中小编将会给大家带来有关Springboot项目中如何实现异常处理自定义,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。背景Springboot 默认把异常的处理集中到一个ModelAndView...
    99+
    2023-05-31
    springboot 异常处理 目中
  • SpringMVC项目异常处理机制详解
    目录1、异常分类2、自定义项目业务异常3、自定义项目系统异常4、其他异常5、异常代码6、异常处理器7、异常发生1、异常分类 通常分为三类:系统异常(SystemException),...
    99+
    2024-04-02
  • 项目中如何根据vue版本进行差异化处理
    这篇文章主要介绍“项目中如何根据vue版本进行差异化处理”,在日常操作中,相信很多人在项目中如何根据vue版本进行差异化处理问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”项目中如何根据vue版本进行差异化处理...
    99+
    2023-07-04
  • Spring MVC项目中的异常处理详解
    目录前言1. 基于配置的简单异常处理2. 基于注解的全局异常处理总结 前言 我们在项目的开发中,难免会遇到各种可预知的、不可预知的异常需要处理。每个过程都单独处理异常,系统...
    99+
    2024-04-02
  • 详解如何在SpringBoot项目中使用全局异常处理
    目录1. 创建自定义异常2.创建全局异常处理器3.创建测试控制器在完整的项目开发中,异常的出现几乎是无法避免的;如果凡是有可能出现异常的地方,我们都手动的使用try-catch将其捕...
    99+
    2022-11-13
    SpringBoot全局异常处理 SpringBoot 异常处理
  • java项目异常处理的方法是什么
    在Java项目中,有多种方法可以处理异常,包括:1. try-catch块:使用try-catch块可以捕获并处理异常。在try块中...
    99+
    2023-09-16
    java
  • Golang错误处理计划:优化项目异常处理策略
    Golang错误处理计划:优化项目异常处理策略 在 Golang 开发中,错误处理一直是一个被广泛讨论的话题。合理的错误处理策略不仅可以提升代码的可靠性,还能使程序更易于维护和调试。本...
    99+
    2024-03-09
    优化 golang 错误处理
  • 异常处理:PHP中如何捕获和处理异常?
    异常处理:PHP中如何捕获和处理异常?在PHP开发中,异常处理是非常重要的一环。当程序发生意外情况或错误时,我们需要通过捕获和处理异常来保证程序的正常运行。PHP中提供了一套异常处理的机制,本文将介绍如何在PHP中捕获和处理异常,并提供具体...
    99+
    2023-12-18
    捕获 处理 异常
  • 怎么在Java项目中对异常进行处理
    本文章向大家介绍怎么在Java项目中对异常进行处理的基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。Java可以用来干什么Java主要应用于:1. web开发;2. Android开发;3. 客户端开发;4. 网页...
    99+
    2023-06-06
  • Springboot项目异常处理及返回结果统一
    目录背景返回结果定义异常的定义异常的处理返回结果的处理完整代码使用示例背景 在创建项目的初期,我们需要规范后端返回的数据结构,以便更好地与前端开发人员合作。 比如后端返回的数据为: ...
    99+
    2022-11-13
    Springboot项目异常处理返回结果统一 Springboot项目异常处理
  • Spring MVC项目中的异常处理怎么配置
    这篇文章主要介绍“Spring MVC项目中的异常处理怎么配置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Spring MVC项目中的异常处理怎么配置”文章能帮助大家解决问题。...
    99+
    2023-06-30
  • Java异常如何处理
    这篇文章主要讲解了“Java异常如何处理”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Java异常如何处理”吧!  你觉得自己是一个Java专家吗?是否肯定自己已经全面掌握了Java的异常处...
    99+
    2023-06-03
  • 在Java项目中运行异常处理时出现异常怎么解决
    这篇文章将为大家详细讲解有关在Java项目中运行异常处理时出现异常怎么解决,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。  Java异常处理运行时异常(RuntimeExcepti...
    99+
    2023-05-31
    java 异常处理 ava
  • vue项目安装scss常见报错处理方式
    目录安装sass依赖问题原因解决方案安装sass依赖 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm...
    99+
    2024-04-02
  • Springboot项目全局异常统一处理案例代码
    最近在做项目时需要对异常进行全局统一处理,主要是一些分类入库以及记录日志等,因为项目是基于Springboot的,所以去网络上找了一些博客文档,然后再结合项目本身的一些特殊需求做了些...
    99+
    2023-01-29
    Springboot全局异常处理 Springboot全局异常统一处理 Springboot统一异常处理
  • 如何理解.Net异常处理
    本篇文章给大家分享的是有关如何进行.Net异常处理,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。异常处理     可以使用 TryCatch 活动...
    99+
    2023-06-17
  • java项目中出现异常如何解决
    本篇文章为大家展示了java项目中出现异常如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表,实现了面向对象...
    99+
    2023-06-14
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作