【Nuxt3】useFetchでintercept

2022年8月22日

最近ついにNuxt3を触る機会があったのでNuxt3系の備忘録も残していきたいと思います。

最初はNuxt3で特徴的なuseFetchについて。

Axios では interceptors.response.use で実装していたインターセプタを useFetch で実装する方法について日本語の記事も現時点で無さそうだったので残しておきます。

onResponse

useFetch の option として引数にonResponse などの各種メソッドが定義できるようでした。

    async onResponse({ request, response, options }) {
      console.log('[fetch response]')
    },
    async onResponseError({ request, response, options }) {
      console.log('[fetch response error]')
    },

    async onRequest({ request, options }) {
      console.log('[fetch request]')
    },
    async onRequestError({ request, options, error }) {
      console.log('[fetch request error]')
    }

例えばこれらを使って composables 配下に useCustomFetch.ts を以下のように追加する事で、 useCustomFetch でロガー機能が追加された customFetch を使用することが可能になります。

export const useCustomFetch = (url: string, options?: FetchOptions) => {
  return useFetch(url, {
    ...options,
    async onResponse({ request, response, options }) {
      console.log('[fetch response]')
    },
    async onResponseError({ request, response, options }) {
      console.log('[fetch response error]')
    },

    async onRequest({ request, options }) {
      console.log('[fetch request]')
    },
    async onRequestError({ request, options, error }) {
      console.log('[fetch request error]')
    }
  })
}