--- slug: "nuxt-でasync-メソッド内の-axiosget-が失敗した時トーストを表示する-typescript-デコレーター" title: "A TypeScript Decorator to Show a Toast When $axios.$get Fails in an Async Method with Nuxt" description: "This article introduces a TypeScript decorator code that displays a toast notification when the $axios.$get method fails within an async method in a Nuxt.js application." url: "https://www.ytyng.com/en/blog/nuxt-でasync-メソッド内の-axiosget-が失敗した時トーストを表示する-typescript-デコレーター" publish_date: "2020-10-07T12:49:56Z" created: "2020-10-07T12:49:56Z" updated: "2026-02-27T09:34:40.863Z" categories: ["Javascript", "nuxt"] keywords: "" featured_image_url: "https://media.ytyng.com/resize/20230812/3f5974affb8d47009a45286876128697.png.webp?width=768" has_video: false has_music: false video_urls: [] music_urls: [] lang: "en" --- # A TypeScript Decorator to Show a Toast When $axios.$get Fails in an Async Method with Nuxt

TypeScript Decorator to Show Toast When $axios.$get Fails in an async Method in Nuxt

/**
 * Decorator for async functions
 *
 * When performing axios communication within a method using await $axios.$get...,
 * if it fails, show an error toast.
 */
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('An error occurred while communicating with the server', {
        title: 'Server Error',
        variant: 'danger',
        toaster: 'b-toaster-bottom-center'
      })
    }
  }
}