Vue中如何優(yōu)雅的捕獲 Promise 異常詳解
常規(guī)的異常捕獲方式
在 Promise 提供了一個 .catch 方法用來捕獲異常，假設(shè)有很多異步請求，通常會把 .catch 方法放在鏈式調(diào)用的最末尾。正常情況下末尾的 .catch 不會被觸發(fā)，但當前面的任何一個 Promise rejected 之后，.catch 就可以捕獲到異常
promiseFunction1({
year: unref(year),
})
.then((res) => {
if (res.status === 200) {
return promiseFunction2(res.data?.name || "");
}
})
.then((res) => {
if (res.status === 200) {
const getUserInfo = userInfoResult.data;
// ... 具體操作
}
})
// 異常捕獲
.catch((error) => console.error(error));
如果使用 Promise 的語法糖 async / await 的話，可以使用更符合直覺的 try...catch 捕獲異常，上面這個請求例子就可以修改為
async function handleUserInfo() {
try {
const userResult = await promiseFunction1({ year: unref(year) });
if (userResult.status !== 200) return;
const userInfoResult = await promiseFunction2(res.data?.name || "");
if (userInfoResult.status !== 200) return;
getUserInfo = userInfoResult.data;
// ... 具體操作
} catch (error) {
console.error(error);
}
}
不管是 .then 方法還是 try...catch 都需要增加一些代碼操作，最重要的是可能會忘記捕獲異常，所以下面介紹兩個更好一些的解決方案
好一些的方式：await-to-js
await-to-js 是一個大佬對 async / await 返回內(nèi)容進行的一層封裝，在不用 try...catch 的方式下也能進行異常捕獲
在使用前需要先引入這個依賴：npm i await-to-js，下面我們來改寫簡化一下之前的異常捕獲方式
import to from 'await-to-js';
async function handleUserInfo() {
const [userError, userResult] = await promiseFunction1({ year: unref(year) })
if (userResult.status !== 200) return
const [userInfoError, userInfoResult] = await promiseFunction2(res.data?.name || "")
if (userInfoResult.status !== 200) return
getUserInfo = userInfoResult.data
// ... 具體操作
}
await-to-js 的實現(xiàn)也就短短幾行代碼，本質(zhì)就是對 Promise 的 .then 和 .catch 返回結(jié)果進行組合，然后整體作為一個 Promise 再返回出去
export function to<T, U = Error> (
promise: Promise<T>,
errorExt?: object // 傳遞給 err 對象的附加信息
): Promise<[U, undefined] | [null, T]> {
return promise
.then<[null, T]>((data: T) => [null, data])
.catch<[U, undefined]>((err: U) => {
if (errorExt) {
const parsedError = Object.assign({}, err, errorExt);
return [parsedError, undefined];
}
return [err, undefined];
});
}
export default to;
雖然 await-to-js 簡化了代碼，但還是需要引入依賴，對請求進行一層包裹，還是稍微麻煩了一點，如果我們對異常處理沒有特殊處理的需要，僅僅只是捕獲并且拋出，為了追求更簡潔的代碼；
或者項目中有非常多的地方?jīng)]有異常捕獲，需要一個一個的手工增加非常麻煩，針對這兩種情況，還有沒有更好的辦法呢？
更好的方式：全局捕獲
在 Vue2 的全局配置中提供了一個 errorHandler 鉤子可以用于捕獲全局異常，但是最低版本要求 2.2.0+
errorHandler 第一個參數(shù) err 是具體的錯誤信息，第二個參數(shù) vm 是 Vue 組件信息，第三個參數(shù) info 是 Vue 特定的錯誤信息，比如錯誤所在的生命周期鉤子。一般為了捕獲 Vue 特定的 info 信息，在內(nèi)部處理時還會加上一層 nextTick ，確保捕獲的是 DOM 渲染完成之后的信息。另外最好在根據(jù)不同環(huán)境配置判斷是否需要捕獲異常，增加程序的靈活性
// errorHandler 使用示例
import Vue from 'vue'
// 配置項形式：'development' | ['development', 'production']
const { errorLog: needErrorLog } = settings
// 根據(jù)配置判斷什么環(huán)境下需要捕獲異常
function checkNeedErrorLog() {
const env = process.env.NODE_ENV
if (isString(needErrorLog)) {
return env === needErrorLog
}
if (isArray(needErrorLog)) {
return needErrorLog.includes(env)
}
return false
}
// 全局異常捕獲
if (checkNeedErrorLog()) {
Vue.config.errorHandler = function (err, vm, info) {
Vue.nextTick(() => {
console.error(`[${projectName}]: ${err}。`, `Vue info: ${info}`, vm)
})
}
}
根據(jù)官網(wǎng)的描述，不同的 Vue 版本捕獲的信息不同，所以建議最好是更新 Vue 2.6.0 以上的版本，這樣就可以全局捕獲到 Promise 和 async / await 拋出的異常了，
從 2.2.0 起，errorHandler 鉤子也會捕獲組件生命周期鉤子里的錯誤。同樣的，當這個鉤子是 undefined 時，被捕獲的錯誤會通過 console.error 輸出而避免應用崩潰
從 2.4.0 起，errorHandler 鉤子也會捕獲 Vue 自定義事件處理函數(shù)內(nèi)部的錯誤
從 2.6.0 起，errorHandler 鉤子也會捕獲 v-on DOM 監(jiān)聽器內(nèi)部拋出的錯誤。另外，如果任何被覆蓋的鉤子或處理函數(shù)返回一個 Promise 鏈 (例如 async 函數(shù))，則來自其 Promise 鏈的錯誤也會被處理
在 Vue3 中，除了提供 errorHandler 鉤子外，還提供了 warnHandler 鉤子，兩個鉤子的用法相同，區(qū)別是是 warnHandler 只在開發(fā)環(huán)境生效，生產(chǎn)環(huán)境會被忽略
app.config.warnHandler = function(msg, vm, trace) {
// `trace` 是組件的繼承關(guān)系追蹤
}以上就是Vue中如何優(yōu)雅的捕獲 Promise 異常詳解的詳細內(nèi)容，更多關(guān)于Vue Promise 異常捕獲的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了Bpmn.js?自定義描述文件使用說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
以前我們經(jīng)常在react中使用jsx,現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于在vue中寫jsx的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue實現(xiàn)虛擬列表，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
reactive是Vue 3的Composition API中的一個函數(shù),它允許你創(chuàng)建一個響應式的數(shù)據(jù)對象,本文主要介紹了深入理解Vue.js3中Reactive的實現(xiàn),感興趣的可以了解一下2024-01-01
本文主要介紹了vue全局接入百度地圖的實現(xiàn)示例，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
最近在做APP客戶端掃描PC端二維碼登錄,于是記錄一下實現(xiàn)過程,下面這篇文章主要給大家介紹了關(guān)于Vue?PC前端掃碼登錄功能實現(xiàn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進行判斷的實例講解
今天小編就為大家分享一篇對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進行判斷的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue?路由判斷方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue?Router路由hash模式與history模式詳細介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點擊一個按鈕需要跳轉(zhuǎn)到對應的頁面，這就是路由跳轉(zhuǎn)2022-08-08
這篇文章主要介紹了vue預覽本地pdf文件方法之vue-pdf組件使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03