Tengo problemas con axios, en mi código no ejecuto las funciones de mi complemento, uso vite. No puedo vincular mi token en los encabezados.
interceptor.ts
import type { App } from "vue"; import axios from "axios"; export default { install: (app: App): void => { app.config.globalProperties.$http = axios; const $http = app.config.globalProperties.$http; const handleResponse = (response: unknown) => { // ! this does not run console.log('response :>> ', response); return response; }; const handleError = (err: unknown) => { // ! this also does not console.log('err :>> ', err); return err; } $http.interceptors.response.use(handleResponse, handleError); }, };principal.ts
import { createApp } from "vue"; import { createPinia } from "pinia"; import element_plus from "@/plugins/element-ui"; import interceptor from "@/plugins/interceptor"; import App from "./App.vue"; import router from "./router"; const app = createApp(App); app.use(element_plus); app.use(interceptor); app.use(createPinia()); app.use(router); app.mount("#app"); export default app;paquete.json
"dependencies": { "@bundled-es-modules/axios": "^0.27.2", "boxicons": "^2.1.2", "element-plus": "^2.2.0", "pinia": "^2.0.13", "vue": "^3.2.33", "vue-router": "^4.0.14" },He probado redaxios pero sin éxito. ¿Me pueden ayudar con un ejemplo?, gracias.
Solución
Encontré la solución, la clave es crear una instancia y hacer la exportación.
común-http.ts
import axios from "axios"; const baseURL = import.meta.env.VITE_BASE_API; const apiClient = axios.create({ baseURL, headers: { "Content-type": "application/json", "Access-Control-Allow-Origin": "*", }, validateStatus: () => true, }); export default apiClient;luego, llamo a la función en mi interceptor.
import type { App } from "vue"; import type { AxiosResponse } from "axios"; import http from "@/utils/common-http"; export default { install: (app: App): void => { app.config.globalProperties.$http = http; const $http = app.config.globalProperties.$http; const handleResponse = (response: AxiosResponse) => { // Here your code console.log('response :>> ', response); return response; }; ...