Vue中如何優(yōu)雅的捕獲 Promise 異常詳解
常規(guī)的異常捕獲方式
在 Promise 提供了一個 .catch 方法用來捕獲異常，假設有很多異步請求，通常會把 .catch 方法放在鏈式調用的最末尾。正常情況下末尾的 .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 返回內容進行的一層封裝，在不用 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)也就短短幾行代碼，本質就是對 Promise 的 .then 和 .catch 返回結果進行組合，然后整體作為一個 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 信息，在內部處理時還會加上一層 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ù)內部的錯誤
從 2.6.0 起，errorHandler 鉤子也會捕獲 v-on DOM 監(jiān)聽器內部拋出的錯誤。另外，如果任何被覆蓋的鉤子或處理函數(shù)返回一個 Promise 鏈 (例如 async 函數(shù))，則來自其 Promise 鏈的錯誤也會被處理
在 Vue3 中，除了提供 errorHandler 鉤子外，還提供了 warnHandler 鉤子，兩個鉤子的用法相同，區(qū)別是是 warnHandler 只在開發(fā)環(huán)境生效，生產環(huán)境會被忽略
app.config.warnHandler = function(msg, vm, trace) {
// `trace` 是組件的繼承關系追蹤
}以上就是Vue中如何優(yōu)雅的捕獲 Promise 異常詳解的詳細內容，更多關于Vue Promise 異常捕獲的資料請關注腳本之家其它相關文章！
相關文章
vue3中使用vuedraggable實現(xiàn)拖拽el-tree數(shù)據(jù)分組功能
這篇文章主要介紹了vue3中使用vuedraggable實現(xiàn)拖拽el-tree數(shù)據(jù)分組功能,可以實現(xiàn)單個拖拽、雙擊添加、按住ctrl鍵實現(xiàn)多個添加,或者按住shift鍵實現(xiàn)范圍添加,添加到框中的數(shù)據(jù),還能拖拽排序,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue 禁用瀏覽器的前進后退操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue中組件這個特性讓不少前端er非常喜歡，我自己也是其中之一，它讓前端的組件式開發(fā)更加合理和簡單。下面這篇文章主要給大家介紹了關于Vue2中組件間通信的解決全方案，文中通過示例代碼介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-07-07
寫本篇文章之前其實也關注過vue中的一個關于加載動態(tài)組件is的API，最開始研究它只是用來實現(xiàn)一個tab切換的功能,需要的朋友可以參考下2019-05-05
Webpack和Vite是兩種主流的前端構建工具,它們在功能、性能和使用場景上有所不同,Webpack提供豐富的功能和配置,適合大型復雜項目,但可能導致啟動和構建速度較慢,Vite基于ES模塊,支持快速的熱替換,適合小型或中等項目,需要的朋友可以參考下2024-10-10
本篇文章主要介紹了vue-resource 攔截器使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
vue之elementUi的el-select同時獲取value和label的三種方式
這篇文章主要介紹了vue之elementUi的el-select同時獲取value和label的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
vue-cli2 構建速度優(yōu)化的實現(xiàn)方法
這篇文章主要介紹了vue-cli2 構建速度優(yōu)化的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue?router權限管理實現(xiàn)不同角色顯示不同路由
本文主要介紹了vue?router權限管理實現(xiàn)不同角色顯示不同路由，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue中data和data()的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03