nuxt で、async メソッド内の $axios.$get が失敗した時トーストを表示する typescript デコレーター
2020-10-07 21:49 (4年前)
ytyng
nuxt で、async メソッド内の $axios.$get が失敗した時トーストを表示する TypeScript デコレーター
/**
* async function 用デコレータ
*
* メソッドの中で、await $axios.$get... などの処理で axios 通信をする時、
* 失敗したらエラートーストを表示する
*/
export function axiosErrorToast (_target: Vue, _propertyKey: string, descriptor: PropertyDescriptor) {
const method = descriptor.value
descriptor.value = async function (this: Vue) {
try {
return await Reflect.apply(method, this, arguments)
} catch (error) {
if (!error.isAxiosError) {
throw error
}
this.$root.$bvToast.toast('サーバとの通信でエラーが発生しました', {
title: 'サーバーエラー',
variant: 'danger',
toaster: 'b-toaster-bottom-center'
})
}
}
}
コメント