onRequestonResponseError
KKonRequestonResponseErroruseFetch$fetch instance with global interceptors using a Nuxt plugin. Here's how you can do it:plugins/api.ts:$fetch instance with global interceptors and exposes it as $api through useNuxtApp().$api in your components or pages:$api without having to create a custom useFetch$fetch in Nuxt (https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-fetch)$fetch or useFetch$fetch utility is intentionally not globally configurable to maintain consistent behavior throughout the application.KK$fetch$fetch$fetch$fetch$fetchplugins/api.ts$api$api$apiuseNuxtApp()export default defineNuxtPlugin((nuxtApp) => {
const api = $fetch.create({
onRequest({ request, options }) {
// Global onRequest logic here
console.log('Request:', request)
},
onResponseError({ request, response, options }) {
// Global onResponseError logic here
console.log('Response Error:', response.status)
}
})
// Expose to useNuxtApp().$api
return {
provide: {
api
}
}
})<script setup>
const { $api } = useNuxtApp()
const { data } = await useAsyncData('modules', () => $api('/modules'))
</script>