'Looking for a right way to inject Vue data in axios interceptor
I have a Vue 3 plugin for popup messages. This plugin extract it methods with use function and looks like
export function usePopup () {
const { addModal, addMessage, addToast } = inject(PopupInjectionKey) as PopupMethods;
return { addModal, addMessage, addToast };
}
Now I'm trying to implement global axios interceptor and I want to use my modal message to show errors from requests.
So I created method:
export function registerInterceptorGeneric () {
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
if (error?.response) {
const { status, data, headers } = error.response;
const { addMessage } = usePopup();
switch (status) {
case 409:
addMessage(data.message, MessageType.Info);
break;
}
}
return Promise.reject(error);
});
}
I call this method from main.ts, but unfortunately, usePopup is obviously out of context. So my question is - how i can pass Context to this function? Or maybe I should call this function from App.ts with addMessage as argument? I'm new to Vue, so, what's the right way to do such things?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
