api

api.ts

Описание

Данный код представляет собой настройку и использование axios для работы с HTTP-запросами в приложении. Axios - это библиотека для выполнения HTTP-запросов, которая позволяет легко взаимодействовать с внешними API.

1. import axios from 'axios';: Здесь мы импортируем библиотеку axios, которая позволяет совершать HTTP-запросы.

2. import { USER_LOCALSTORAGE_KEY } from '@/shared/const/localstorage';: Импортируем константу USER_LOCALSTORAGE_KEY из файла с константами для работы с локальным хранилищем.

3. export const $api = axios.create({baseURL: __API__,});: Создаем экземпляр axios с указанным базовым URL. __API__ - это переменная окружения, которая должна быть предварительно определена в конфигурации сборки, и она будет использоваться как базовый URL для всех запросов, сделанных через этот экземпляр.

4. $api.interceptors.request.use((config) => {...});: Здесь мы используем interceptors axios для добавления заголовка Authorization к каждому запросу перед его отправкой на сервер. Этот интерцептор обрабатывает конфигурацию запроса перед его выполнением.

   Внутри функции обработчика запроса, мы проверяем, есть ли в конфигурации запроса свойство headers. Если свойство headers существует, то мы получаем значение токена из локального хранилища localStorage по ключу USER_LOCALSTORAGE_KEY. Затем устанавливаем значение токена в заголовок Authorization в конфигурации запроса. Это позволит автоматически добавить токен в заголовок каждого отправляемого запроса. Если значение токена отсутствует или не найдено, то в заголовок будет установлена пустая строка. В конце функции, мы возвращаем обновленную конфигурацию запроса с добавленным заголовком Authorization.

rtkApi.ts

Описание

Данный код представляет собой определение службы (service) с использованием библиотеки @reduxjs/toolkit/query/react, которая предоставляет удобные инструменты для работы с запросами. В данном случае, служба rtkApi создается с помощью функции createApi, которой передается конфигурационный объект.

Импортируются необходимые зависимости из библиотеки @reduxjs/toolkit/query/react, а также константа USER_LOCALSTORAGE_KEY из файла с константами для работы с локальным хранилищем.

Затем определяется служба rtkApi с использованием функции createApi, которая принимает объект с несколькими свойствами:

• reducerPath: Указывает путь до редьюсера (reducer), где будут храниться данные из запросов.

• baseQuery: Определяет базовый запрос, который используется для выполнения запросов. В данном случае, используется функция fetchBaseQuery с указанным базовым URL и функцией prepareHeaders для подготовки заголовков перед отправкой каждого запроса.

• endpoints: Здесь определяются конечные точки (endpoints) для запросов. В данном примере, пока что эти конечные точки не определены (пустой объект).

В функции prepareHeaders, которая передается в fetchBaseQuery, проверяется наличие токена в локальном хранилище localStorage по ключу USER_LOCALSTORAGE_KEY. Если токен существует, он добавляется в заголовок Authorization. Это позволит автоматически добавить токен в заголовок каждого отправляемого запроса. Если значение токена отсутствует или не найдено, в заголовок будет установлена пустая строка.

В endpoints пока что определены пустые объекты, что означает, что конечные точки для запросов пока не определены. Они могут быть добавлены позже с помощью функции builder внутри объекта.