How to create an api service with axios in VueJs?

Question

Im trying to create an api service using this sintax

apiservice.js

import axios from 'axios'
import * as users from '@/plugins/apiservice/modules/users';

const apiservice = axios.create({
  baseURL: process.env.VUE_APP_URL,
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    Authorization: `Bearer ${localStorage.getItem('sessionToken')}`
  },
})
export default {apiservice, users};

users.js

import apiservice from "@/plugins/apiservice";

  const login = async (params) => {
    try {
      const result = await apiservice.post('/login', params);
      return result.data;
    } catch (error) {
      return error;
    }
  }
 
  export {login};

Component.vue

import apiservice from '@/plugins/apiservice';
const response = await apiservice.users.login(this.loginData);

I got this error when i enter data TypeError: plugins_apiservice__WEBPACK_IMPORTED_MODULE_2_.default.post is not a function

NOTE 1: I tried a GET request to test the connection and i got 200 response

NOTE 2: If a use the exact login function inside apiservice, it works perfectly

tony19 · Accepted Answer · 2021-07-12 22:50:40Z

1

apiservice.js exports the axios instance as a subproperty of the default export (i.e., "apiservice"):

// apiservice.js
const apiservice = axios.create(/*...*/)
          👆         👇
export default {apiservice, users};

To use the axios instance, you'll have to reference that subproperty:

// users.js
import apiservice from "@/plugins/apiservice";
//...
const result = await apiservice.apiservice.post('/login', params);

Alternatively, you could use a named export:

// apiservice.js
export const axiosInstance = axios.create(/*...*/)

// users.js
import { axiosInstance } from "@/plugins/apiservice";
//...
const result = await axiosInstance.post('/login', params);

edited Jul 12, 2021 at 22:50

answered Jul 12, 2021 at 22:36

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create an api service with axios in VueJs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related