Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

187
Views
Configure Axios as reusable module

I want to create a axios config file where I can create several apis with different configurations, e.g. http.js:

import axios from "axios";

const backendApi =  axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL + "api/",
});

const anotherApi =  axios.create({
  baseURL: "https://example.com",
});

export default {
  backendApi,
  anotherApi
};

Now I want to use the backendApi, e.g. in my actions.js:

import backendApi from "@/http"

const userRegister = (context, user) => {

  backendApi
    .post("users/register", user)
    .then((resp) => {
      //
    })
    .catch((err) => {
      //
    })
}

export default {
  userRegister
}

But I receive the following error:

Error in v-on handler: "TypeError: http__WEBPACK_IMPORTED_MODULE_0_.default.post is not a function"

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

You are not using exports the way you intend to.

What you want is named exports instead of a default one.

import axios from "axios";

export const backendApi =  axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL + "api/",
});

export const anotherApi =  axios.create({
  baseURL: "https://example.com",
});
import { backendApi } from "@/http"

export const userRegister = (context, user) => {
  backendApi
    .post("users/register", user)
    .then((resp) => {
      //
    })
    .catch((err) => {
      //
    })
}
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs