Как правильно инициализировать в проекте дефолтные настройки для одного из модулей?

Question

[Дмитрий]

Имеется n-количество модулей, по одному на каждую страницу приложения.
Пример:
- user-profile.js
- catalog.js
- conversations.js
- login.js

На каждой странице используется модуль Axios в качестве обёртки для XMLHttpRequest.
Чтобы корректно распозновать AJAX запрос на бэкенде приходится прописывать для этого модуля дефолтный конфиг:

axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

В каком одном месте прописать этот конфиг и как потом в каждом из модулей реюзать эту функциональность?

Спасибо.

Answer 1

[Максим]

Указать его в самом начале (то есть "вверху" приложения, там где он первый раз "появляется"), где применяется axios / либо где-вы его ради этого импортнете. Разве так не сработает?

Либо такой вариант:

function buildHeaders() {
  const authToken = localStorage.getItem('token')
  return { ...defaultHeaders, Authorization: authToken }
}

export function httpGet(url) { //экспортируете функцию для будущих вызовов
  return fetch(url, { // я использую fetch, но для axios сделать, думаю вы сможете
    headers: buildHeaders(), // те самые заголовки, которые нужны в каждом запросе
  })
  .then(checkStatus) // это уже не важно, у меня в коде просто далее идет еще несколько проверок общих
}

Comments

[Дмитрий]

Можно и так, но в каждом модуле нужно будет его заново импортировать и конфигурировать.

Пока что додумался лишь до создании некоего bootstrap модуля, в котором буду импортировать и настраивать необходимые модули, используемые во всем приложении:

bootstrap.js

import axios from 'axios';

// Configure Axios
axios.defaults.headers.common = {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    'X-Requested-With': 'XMLHttpRequest'
};

export {axios}

user-profile.js

// Импорт только Axios c необходимыми настройками
import {axios} from '../bootstrap'

[Максим]

Дмитрий: по сути я вам тоже самое написал. Не понял про "Можно и так, но в каждом модуле нужно будет его заново импортировать и конфигурировать." - из моего примера, получается что вызываете httpGet функцию и в ней уже есть нужные заголовки, из вашего - тот же axios... по-моему вполне себе нормальное решение.