Показать загрузчик до того, как Axios получит данные, используя .get

Question

Когда пользователь попадает на свою панель инструментов, я хочу загрузить некоторые виджеты, и я буду делать это через axios.Я хочу показать загрузочный счетчик во время выборки данных.После некоторого копания кажется, что способ сделать это - использовать перехватчики axios.(Я думаю) Похоже, у меня это работает, но я не знаю, где мне следует обрабатывать ответ, так как это работает в обоих направлениях.

Вот первый способ, который работает:

axios.interceptors.request.use((config) => {
    console.log('Start Ajax Call');
    FreezeUI();
    return config;
}, (error) => {

    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
    console.log('Done with Ajax call');
    document.querySelector('.test').insertAdjacentHTML('afterbegin', response.data.html);
    UnFreezeUI();
    return response;

}, (error) => {
    return Promise.reject(error);
});

axios.get('/account/active-listings')
.then(response => {
    // Do I need this?
})
.catch(err => console.log(err));

И второй способ, который также работает.Но, похоже, мне вообще не нужны эти блоки .then () и .catch ()?

axios.interceptors.request.use((config) => {
    console.log('Start Ajax Call');
    FreezeUI();
    return config;
}, (error) => {

    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
    console.log('Done with Ajax call');
    return response;

}, (error) => {
    return Promise.reject(error);
});

axios.get('/account/active-listings')
.then(response => {
    document.querySelector('.test').insertAdjacentHTML('afterbegin', response.data.html);
    UnFreezeUI();
})
.catch(err => console.log(err));

Answer 1

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

Посмотрите часть конфигурации запроса на их странице github

маленький пример для наглядности:

axios.get('/account/active-listings', {
    onDownloadProgress: (pe) => document.querySelector('.place-to-insert-spinner').insertAdjacentHTML(loading spinner thingie)
})

РЕДАКТИРОВАТЬ: Вы, вероятно, должны удалить счетчик, когда ваш запрос также завершен.