一、錯(cuò)誤類型

任何一個(gè)框架，對(duì)于錯(cuò)誤的處理都是一種必備的能力

在Vue 中，則是定義了一套對(duì)應(yīng)的錯(cuò)誤處理規(guī)則給到使用者，且在源代碼級(jí)別，對(duì)部分必要的過程做了一定的錯(cuò)誤處理。

主要的錯(cuò)誤來源包括：

• 后端接口錯(cuò)誤
• 代碼中本身邏輯錯(cuò)誤

二、如何處理

后端接口錯(cuò)誤

通過axios的interceptor實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求的response先進(jìn)行一層攔截

apiClient.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response.status == 401) {
      router.push({ name: "Login" });
    } else {
      message.error("出錯(cuò)了");
      return Promise.reject(error);
    }
  }
);

代碼邏輯問題

全局設(shè)置錯(cuò)誤處理

設(shè)置全局錯(cuò)誤處理函數(shù)

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的錯(cuò)誤信息，比如錯(cuò)誤所在的生命周期鉤子
  // 只在 2.2.0+ 可用
}

errorHandler指定組件的渲染和觀察期間未捕獲錯(cuò)誤的處理函數(shù)。這個(gè)處理函數(shù)被調(diào)用時(shí)，可獲取錯(cuò)誤信息和 Vue 實(shí)例

不過值得注意的是，在不同Vue 版本中，該全局 API 作用的范圍會(huì)有所不同：

從 2.2.0 起，這個(gè)鉤子也會(huì)捕獲組件生命周期鉤子里的錯(cuò)誤。同樣的，當(dāng)這個(gè)鉤子是 undefined 時(shí)，被捕獲的錯(cuò)誤會(huì)通過 console.error 輸出而避免應(yīng)用崩

從 2.4.0 起，這個(gè)鉤子也會(huì)捕獲 Vue 自定義事件處理函數(shù)內(nèi)部的錯(cuò)誤了

從 2.6.0 起，這個(gè)鉤子也會(huì)捕獲 v-on DOM 監(jiān)聽器內(nèi)部拋出的錯(cuò)誤。另外，如果任何被覆蓋的鉤子或處理函數(shù)返回一個(gè) Promise 鏈 (例如 async 函數(shù))，則來自其 Promise 鏈的錯(cuò)誤也會(huì)被處理

生命周期鉤子

errorCaptured是 2.5.0 新增的一個(gè)生命鉤子函數(shù)，當(dāng)捕獲到一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用

基本類型

(err: Error, vm: Component, info: string) => ?boolean

此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播

參考官網(wǎng)，錯(cuò)誤傳播規(guī)則如下：

• 默認(rèn)情況下，如果全局的 config.errorHandler 被定義，所有的錯(cuò)誤仍會(huì)發(fā)送它，因此這些錯(cuò)誤仍然會(huì)向單一的分析服務(wù)的地方進(jìn)行匯報(bào)
• 如果一個(gè)組件的繼承或父級(jí)從屬鏈路中存在多個(gè) errorCaptured 鉤子，則它們將會(huì)被相同的錯(cuò)誤逐個(gè)喚起。
• 如果此 errorCaptured 鉤子自身拋出了一個(gè)錯(cuò)誤，則這個(gè)新錯(cuò)誤和原本被捕獲的錯(cuò)誤都會(huì)發(fā)送給全局的 config.errorHandler
• 一個(gè) errorCaptured 鉤子能夠返回 false 以阻止錯(cuò)誤繼續(xù)向上傳播。本質(zhì)上是說“這個(gè)錯(cuò)誤已經(jīng)被搞定了且應(yīng)該被忽略”。它會(huì)阻止其它任何會(huì)被這個(gè)錯(cuò)誤喚起的 errorCaptured 鉤子和全局的 config.errorHandler

下面來看個(gè)例子

定義一個(gè)父組件cat

Vue.component('cat', {
    template:`
        <div>
			<h1>Cat: </h1>
        	<slot></slot>
        </div>`,
    props:{
        name:{
            required:true,
            type:String
        }
    },
    errorCaptured(err,vm,info) {
        console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); 
        return false;
    }
});

定義一個(gè)子組件kitten，其中dontexist()并沒有定義，存在錯(cuò)誤

Vue.component('kitten', {
    template:'<div><h1>Kitten: {{ dontexist() }}</h1></div>',
    props:{
        name:{
            required:true,
            type:String
        }
    }
});

頁面中使用組件

<div id="app" v-cloak>
    <cat name="my cat">
        <kitten></kitten>
    </cat>
</div>

在父組件的errorCaptured則能夠捕獲到信息

cat EC: TypeError: dontexist is not a function
info: render

附：Vue統(tǒng)一錯(cuò)誤處理

用到Vue的全局 errorHandler

Vue.config.errorHandler = function(err) {
  console.log("global", err);
  message.error("出錯(cuò)了");
};

// ...此處省略其他配置

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

總結(jié)一下

• handleError在需要捕獲異常的地方調(diào)用，首先獲取到報(bào)錯(cuò)的組件，之后遞歸查找當(dāng)前組件的父組件，依次調(diào)用errorCaptured 方法，在遍歷調(diào)用完所有 errorCaptured 方法或 errorCaptured 方法有報(bào)錯(cuò)時(shí)，調(diào)用 globalHandleError 方法
• globalHandleError調(diào)用全局的 errorHandler 方法，再通過logError判斷環(huán)境輸出錯(cuò)誤信息
• invokeWithErrorHandling更好的處理異步錯(cuò)誤信息
• logError判斷環(huán)境，選擇不同的拋錯(cuò)方式。非生產(chǎn)環(huán)境下，調(diào)用warn方法處理錯(cuò)誤

到此這篇關(guān)于手拉手教你如何處理vue項(xiàng)目中錯(cuò)誤的文章就介紹到這了,更多相關(guān)vue項(xiàng)目錯(cuò)誤處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論