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

Question

[nastya_zholudeva]

В корне проекта есть файл 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

Answer 1

[Evgeny Kulakov]

Не стоит в этом файле использовать эту конструкцию, т.к. по сути у вас это клиент для работы по сети. Возвращайте данные из клиента в компонент и уже в нем выполняйте необходимые действия.

Comments

[nastya_zholudeva]

Evgeny Kulakov, подскажите, как это сделать.

Идея у меня была такая: я при ошибке эмичу значение в App.vue а там уже делаю то, что мне нужно. Эмичу именно в App.vue потому как мне это событие нужно в каждом компоненте

[Evgeny Kulakov]

Трудно дать какие-то рекомендации, все будет зависеть как у вас реализован проект.
Можете использовать шину событий - генерировать событие в вашем клиенте и подписаться на него в компоненте.
Если используется vuex - можно выставлять флаг в vuex и слушать его изменение в компоненте.

[nastya_zholudeva]

Evgeny Kulakov, но если я буду использовать bus.$emit, он мне заругается на $emit. Сейчас код вообще не воспринимает все то, что начинается с $. Может есть способ как этот $ экспортнуть себе в файл?

[Evgeny Kulakov]

nastya_zholudeva, не знаю как у вас реализована шина. Обычно это прото пустой vue экземпляр, который дает вам использовать методы $emit и $on для реализации шины событий.
Просто импортируйте его в ваш файл и используйте:

import bus from 'path/to/eventbus'