Как вынести в отдельный файл Vue.http.interceptors?

Question

[borisovdenis]

Мне нужно задать перехватчики http. Сейчас они у меня задаются в файле main.js. Но городить там все подряд, не правильно и не удобно, хочу перенести в отдельный файл интерсепторы. Т.е. сделать вот так.

import {Loading} from 'element-ui';
import {LOADING_CONFIG} from './const';
import Vue from 'vue';

const addLoadingOnRequest = (request, next) => {
  const loading = Loading.service(LOADING_CONFIG);
  next(() => {
    loading.close();
  });
};

const showErrorMessageOnFailedRequest = (request, next) => {
  next(response => {
    if (response.status > 308) {
      alert('API Error');
    }
  })
};

Vue.http.interceptors.push(addLoadingOnRequest);
Vue.http.interceptors.push(showErrorMessageOnFailedRequest);

Сделал, но не работает. Дебагером не заходит в эти методы.

Подскажите, как нужно правильно выделять код в отдельные файлы во Vue.js приложении?

Answer 1

[markmariner]

Вынесите в файл interceptors.js только интерцепторы:

import {Loading} from 'element-ui';
import {LOADING_CONFIG} from './const';
import Vue from 'vue';

export const addLoadingOnRequest = (request, next) => {
  const loading = Loading.service(LOADING_CONFIG);
  next(() => {
    loading.close();
  });
};

export const showErrorMessageOnFailedRequest = (request, next) => {
  next(response => {
    if (response.status > 308) {
      alert('API Error');
    }
  })
};

Благодаря словам export вы экспортируете эти константы для использования в других файлах.

В файле main.js импортируйте эти константы и подключите их:

import {addLoadingOnRequest, showErrorMessageOnFailedRequest} from 'interceptors';

Vue.http.interceptors.push(addLoadingOnRequest);
Vue.http.interceptors.push(showErrorMessageOnFailedRequest);