nastya_zholudeva
@nastya_zholudeva

Как победить ошибку Cannot read property '$root' of undefined в конструкции this.$root.$emit?

В корне проекта есть файл client.js, где сконструирован любой запрос к API с помощью axios.
import axios from 'axios'
import { api_config } from '../../api_config'
import { getApiToken } from '../../api_config'
import router from '../../src/router/index'

function request(method, url, params, data) {
  let axios_config = {
    // `baseURL` is the server URL that will be used for the request
    baseURL: api_config.api_url,

    // `method` is the request method to be used when making the request
    method: method,

    // `url` will be prepended to `baseURL` unless `baseURL` is absolute.
    url: url,

    headers: {
      Authorization: 'Bearer ' + getApiToken()
    }
  }

  if (params) {
    // `params` are the URL parameters to be sent with the request
    axios_config.params = params
  }

  if (data) {
    // `data` allows changes to the request data before it is sent to the server
    // This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
    axios_config.data = data
  }

  // intercept responses before they are handled by then or catch
  axios.interceptors.response.use((response) => {
    return response
  }, (error) => {
    if (error.response.status == 401) {
      localStorage.removeItem('token')
      router.push({ path: '/login' })
    }
    if (error.response.status == 403) {
      this.$root.$emit('modal', true)
    }
    return Promise.reject(error)
  })

  return axios(axios_config)
}

function get(url) {
  return request('get', url, null, null)
}

function post(url, data) {
  data = data || {}
  return request('post', url, null, data)
}

function put(url, data) {
  data = data || {}
  return request('put', url, null, data)
}

function remove(url) {
  return request('delete', url, null, null)
}

export default {get, post, put, remove, request}

С помощью axios.interceptors.response.use отлавливаю ошибки.

Вопрос: что мне нужно тут сделать, чтобы можно было использовать конструкцию this.$root.$emit потому как сейчас получаю ошибку
Cannot read property '$root' of undefined
    at __WEBPACK_IMPORTED_MODULE_0_axios___default.a.interceptors.response.use
  • Вопрос задан
  • 618 просмотров
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Не стоит в этом файле использовать эту конструкцию, т.к. по сути у вас это клиент для работы по сети. Возвращайте данные из клиента в компонент и уже в нем выполняйте необходимые действия.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы