[Vuejs]-(vue) Uncaught InternalError: too much recursion: failed to use axios

by

-1👍

Here you have 2 options:

  • If you’re using Vue3, import it in your Vue, like you did, but as written in this awnser, i think you should do something more like that:
import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(VueAxios, axios) // 👈
app.mount('#app')
  • You wanna use only axios and don’t get bothered by it, then you don’t have to use VueAxios or make something like app.use(axios) in your main.js, and then make a httpRequestsService file which will handle all the axios part.

For example, here is mine:

import axios from "axios";

axios.defaults.baseURL = process.env.API_BASE_URL
axios.interceptors.response.use(res => res, err => {
    // some code if you wanna handle specific errors
    throw err;
  }
);

const getHeader = (method, endpoint, header, body) => {
    const publicEndpoints = [
        {
            method: 'POST',
            endpoint: '/auth/local'
        }
    ]

    const publicEndpoint = publicEndpoints.find(e => e.method === method && e.endpoint === endpoint)
    if (!publicEndpoint) {
        header.Authorization = localStorage.getItem("jwt")
    }

    return body ? { headers: header, data: body } : { headers: header }
}

export default {
    get(endpoint, header = {}) {
        return axios.get(endpoint, getHeader('GET', endpoint, header))
    },
    post(endpoint, body = {}, header = {}) {
        console.log(body)
        return axios.post(endpoint, body, getHeader('POST', endpoint, header))
    },
    put(endpoint, body = {}, header = {}) {
        return axios.put(endpoint, body, getHeader('PUT', endpoint, header))
    },
    delete(endpoint, body = {}, header = {}) {
        return axios.delete(endpoint, getHeader('DELETE', endpoint, header, body))
    },
}

Leave a comment