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