Wrapper class for Axios in a Vue project that uses interceptor to inject token (stored using Vuex) into header for each request.

Http.js

import axios from 'axios';
import store from "@/data/state"

class Http {
  
  constructor() {
    let service = axios.create({});
    service.interceptors.request.use((config) => {
      config.headers.common['x-access-token'] = store.state.token
      return config
    })
    this.service = service;
  }
  
  redirectTo = (document, path) => {
    document.location = path
  }
  
  get(path) {
    return this.service.get(path)
  }

  patch(path, payload, callback) {
    return this.service.request({
      method: 'PATCH',
      url: path,
      responseType: 'json',
      data: payload
    }).then((response) => callback(response.status, response.data));
  }

  post(path, payload) {
    return this.service.request({
      method: 'POST',
      url: path,
      responseType: 'json',
      data: payload
    })
  }
}

export default new Http;

Thx for this little piece of code. It helped me a lot to understand the workings of Vuejs.

But I have a problem which I do not get my head around: I implemented this wrapper and imported it as a plugin. I further added this .then(... line to the post method, because this is what I need for my program. However, it always reports me that callback is undefined. Why is it? And how would I solve it? It would be great if you could shed some light on this. Thx!

This is my wrapper code:

import axios from 'axios'

class AxiosService {
  constructor() {
    let service = axios.create({
      headers: {
        Authorization: localStorage.getItem('ltx2token')
      }
    })
    service.interceptors.response.use(this.handleSuccess, this.handleError)
    this.service = service
  }

  redirectTo = (document, path) => {
    document.location = path
  }
 
  handleSuccess(response) {
    return response
  }

  handleError = (error) => {
    switch (error.response.status) {
      case 401:
        this.redirectTo(document, '/login')
        break
    }
    return Promise.reject(error)
  }

  get(path, callback) {
    return this.service.get(path).then(
      (response) => (callback(response.status, response.data))
    )
  }

  post(path, payload, callback) {
    return this.service.request({
      method: 'POST',
      url: path,
      responseType: 'json',
      data: payload
    }).then((response) => callback(response.status, response.data))
  }
}

export default new AxiosService;

and this the caller:

    check_syntax(name, content, callback) {
      AxiosService.post(this.$hostname + "/api/mfqlc/syntax",
        {
          name: name,
          content: content,
          peak_lists: null
        }, (status, data) => {
          callback(data)
        }
      )
  }