Creé una aplicación VueJS que usa Vue-Axios para comunicarse con una API de Laravel.
En mi proyecto, tengo un archivo api.js que contiene el siguiente código:
import axios from "axios"; export function apiRequestProtocol(token = null) { var api_instance = axios.create({ baseURL: "http://127.0.0.1:8000/api/", }); if (token) { api_instance.interceptors.request.use( (config) => { config.headers.Authorization = `Bearer ${token}`; return config; }, (error) => { return Promise.reject(error); } ); } return api_instance; } La función apiRequireProtocol se importa en cada componente de Vue que necesita realizar una solicitud a la API de Laravel.
Como puede ver, cada vez que un componente usa apiRequestProtocol() , se crea una nueva instancia de Axios.
Hice esto de esta manera porque algunas "solicitudes" de Axios necesitan access_token y otras no.
Intenté usar la misma instancia de Axios para cada solicitud, simplemente cambiando su encabezado, pero no pude hacerlo con éxito. Si sabe cómo usar solo una instancia cambiándola según la solicitud (si necesita token o no) , hágamelo saber.
Además, me gustaría saber si debo "eliminar" estas instancias después de usarlas o si hay una mejor manera de hacerlo.
¡Gracias!
Mi paquete.json:
{ ... "dependencies": { "@vueuse/head": "^0.6.0", "axios": "^0.21.1", "core-js": "^3.6.5", "vue": "^3.0.0", "vue-axios": "^3.2.5", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0", "vuex-persistedstate": "^4.1.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "sass": "^1.26.5", "sass-loader": "^8.0.2" } } ¡No, definitivamente no quieres una instancia de axios para cada conexión! Pero es posible que desee múltiples instancias. Específicamente, usaría axios.get simple para solicitudes no autenticadas y una instancia para cada token diferente en la aplicación. De esa manera no tengo que perder el tiempo agregando y eliminando interceptores.
Se puede hacer sin nada especial en absoluto:
axios.get(URL, {headers: {"X-my-custom-header": "my-custom-val"}})se puede hacer de la misma manera:
var token_axios = axios.create({ BaseURL: "http://exam.pl" }) var token_interceptor = token_axios.intercepters.request.use( config => { config.headers.Authorization = "Token: MYTOKEN" return config }, error => { return Promise.reject(error) } ) token_axios.get(url, {headers: {"x-my-custom-header": "abc"}})se puede hacer exactamente igual que lo configuramos originalmente, y
se puede hacer si creamos u obtenemos una referencia a él primero:
token_axios.interceptors.request.eject(token_interceptor)(tenga en cuenta que guardamos la referencia de arriba).
Si bien podría usar el paradigma de uso/expulsión para modificar una instancia cada vez, y este sería el enfoque correcto si los tokens cambiaran con frecuencia y las solicitudes fueran raras, si (como sospecho) los tokens cambian con poca frecuencia y las solicitudes son comunes, simplemente usaría algunos objetos como se describe arriba.
Para responder a su otra pregunta, si bien JS tiene recolección de basura, si estaba creando docenas de objetos desechables, eliminarlos manualmente es una buena práctica, ya que el recolector de basura causa ralentizaciones impredecibles cuando se llama.