欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

優(yōu)雅的處理vue項目異常實戰(zhàn)記錄

 更新時間:2019年06月05日 11:01:17   作者:快狗打車前端團隊  
這篇文章主要給大家介紹了關于如何優(yōu)雅的處理vue項目異常的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧

背景

  • 你還在為處理Uncaught (in promise) ReferenceError煩惱嗎?
  • 你還在為捕獲異常反復的寫try catch嗎?
  • 你還在為每一個promise寫catch嗎?

是時候一站式統(tǒng)一處理異常!?。。ㄡ槍ue項目)

全局異常捕獲

Vue.config.errorHandler = function (err, vm, info) {
 // 指定組件的渲染和觀察期間未捕獲錯誤的處理函數(shù)。這個處理函數(shù)被調(diào)用時,可獲取錯誤信息和 Vue 實例。
 
 // handle error
 // `info` 是 Vue 特定的錯誤信息,比如錯誤所在的生命周期鉤子
 // 只在 2.2.0+ 可用 
}

注意:面對異常處理,同步異常和異步異常應該區(qū)別對待分別處理。

vue核心源碼剖析

通過閱讀源碼看一下vue是如何將Vue.config.errorHandler接口暴露給使用者。

同步異常處理方案

// 定義異常處理函數(shù),判斷用戶是否自定義Vue.config.errorHandler,定義則直接調(diào)用,未定義執(zhí)行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正常執(zhí)行代碼被包裹在try內(nèi),有異常會調(diào)用globalHandleError
} catch (e) {
 globalHandleError(e, vm, '對應信息');
}

異步異常處理方案

// 定義異步異常處理函數(shù),對于自身沒有捕獲異常的promise統(tǒng)一執(zhí)行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可以統(tǒng)一為其定義Promise.prototype.catch()方法。
   res._handled = true;
  }
 } catch (e) {
  handleError(e, vm, info);
 }
 return res
}

// 所有的鉤子函數(shù)調(diào)用異常處理函數(shù)
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
    }
   }
  })
 }
})

完整代碼

下面是全局處理異常的完整代碼,已經(jīng)封裝成一個插件

errorPlugin.js

/**
 * 全局異常處理
 * @param {
 * } error 
 * @param {*} vm 
 */
const errorHandler = (error, vm, info) => {
 console.error('拋出全局異常')
 console.error(vm)
 console.error(error)
 console.error(info)
}
let GlobalError = {
 install: (Vue, options) => {
 /**
  * 全局異常處理
  * @param {
  * } error 
  * @param {*} vm 
  */
  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

資料參考

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。

相關文章

  • Vue.js仿Select下拉框效果

    Vue.js仿Select下拉框效果

    這篇文章主要為大家詳細介紹了Vue.js仿 Select下拉框效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • vue+node 實現(xiàn)視頻在線播放的實例代碼

    vue+node 實現(xiàn)視頻在線播放的實例代碼

    這篇文章主要介紹了vue+node 實現(xiàn)視頻在線播放的實例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-10
  • Vue 中如何利用 new Date() 獲取當前時間

    Vue 中如何利用 new Date() 獲取當前時間

    在 Vue 開發(fā)中,利用 new Date() 方法可以方便地獲取當前時間,并通過 Date 對象的方法進行時間格式化和操作。通過本文的介紹,您應該對在 Vue 中獲取當前時間有了更深入的了解,并了解了一些常見的時間操作方法,需要的朋友可以參考下
    2023-07-07
  • Vue 引入AMap高德地圖的實現(xiàn)代碼

    Vue 引入AMap高德地圖的實現(xiàn)代碼

    這篇文章主要介紹了Vue 引入AMap高德地圖的實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • 解決vue中axios設置超時(超過5分鐘)沒反應的問題

    解決vue中axios設置超時(超過5分鐘)沒反應的問題

    這篇文章主要介紹了解決vue中axios設置超時(超過5分鐘)沒反應的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue組件生命周期運行原理解析

    Vue組件生命周期運行原理解析

    這篇文章主要介紹了Vue組件生命周期運行原理解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-11-11
  • Vue2與Vue3如何利用install自定義全局確認框組件編寫

    Vue2與Vue3如何利用install自定義全局確認框組件編寫

    這篇文章主要介紹了Vue2與Vue3如何利用install自定義全局確認框組件編寫方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue 內(nèi)置組件keep-alive的使用示例

    Vue 內(nèi)置組件keep-alive的使用示例

    這篇文章主要介紹了Vue 內(nèi)置組件keep-alive的使用示例,幫助大家更好的理解和學習使用vue,感興趣的朋友可以了解下
    2021-04-04
  • vue之debounce屬性被移除及處理詳解

    vue之debounce屬性被移除及處理詳解

    今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue.js 2.0學習教程之從基礎到組件詳解

    Vue.js 2.0學習教程之從基礎到組件詳解

    這篇文章主要介紹了Vue.js 2.0從基礎到組件的相關資料,文中介紹的非常詳細,對大家學習或者使用vue.js具有一定的參考價值,需要的朋友可以參考學習,下面來一起看看吧。
    2017-04-04

最新評論