Наверное каждое WEB приложение имеет методы для получения данных через XMLHttpRequest. И для приложений в котором достаточно много таких запросов важно иметь правила организации этих запросов. Хочу поделиться тем решением которое использую я в проектах.

1. В корне приложения создаем папку api

    /src
    --/api
   

2. На текущий момент популярная бибилиотека для работы c XMLHttpRequest является Axios по этому я ее и использую. Создаем файл axios.js где инициализируем этот инструмент.

   /src
   --/api
   ----/axios.js
   

   Содержимое файла (минимально для примера, в реальности данный файл также обрастает проверками статуса 401, AbortController и др.)

   // axios.js
   import axios from 'axios';
   // ипортируем метод getItemLocalstorage из вспомогательной 
   // библиотеки для работы с localStorage
   import getItemLocalstorage from '@/helpers/localStorage.js'; 
      
   // прописываем базовые настройки экземпляра axios
   const Axios = axios.create({
     baseURL: '/api/',
   });
      
   // добавляем заголовок для авторизации OAuth 2.0
   Axios.interceptors.request.use(config => {
     const token = getItemLocalStorage('accessToken');
     const authorizisationToken = token ? `Bearer ${token}` : '';
     config.headers.Authorization = authorizisationToken;
     return config;
   })
      
   export default Axios;
   

3. Создаем файл auth.js в котором будут размещены методы касаемые авторизации пользователя (login,logout, forgotPassword и др.). Таким образом мы логически выделяем методы. Для примера укажу абстрактрые 2 метода.

   /src
   --/api
   ----/axios.js
   ----/auth.js
   

   Содержимое файла

   // auth.js
   import Axios from '@/api/axios'
      
   const loginApi = credentials => {
     return Axios.post('/auth/login', credentials)
   }
   
   const logoutApi = () => {
     return Axios.get('/auth/logout')
   }
   
   export default {
     loginApi,
     logoutApi
   }
   

4. Теперь уже можно импортировать методы запросов к API в компонентах WEB приложения и вызывать (пример Vue компонента)

   <script>
   import {loginApi, logoutApi} from '@/api/auth';
   methods:{
     async login(){
       try{
         const credentials = {
           user: this.user,
           password: this.password
         };
         const {data} = await loginApi(credentials); // Axios возвращате Promise
         // далее уже работаем с полученными данными
         // записываем полученные токены в localStorage и cookie ...
       } catch(e){
         console.log(e)
       } finally {
         this.loading = false;
       }
     }
   }
   </script>
   

Итог:

Мы получили логическое разделение запросов API по по файлам.