Запросы на бэкенд - Получение данных по ссылке с помощью Axios

Данные генерируемые сервером, могут быть динамическими, т.е. зависеть от параметров. Пример - https://randomuser.me/api/?results=2 или https://randomuser.me/api/?results=100. Или статическими, т.е. всегда отдавать одни и те же данные. Могут принимать параметры, по которыми осуществляется запрос на бэкенде, могут не принимать ни одного параметра.

Фронтенд фрэймворкам всё-равно, существует ли файл физически, или он генерируется в момент обращения к нему клиента. Главное, чтобы в формат JSON не было ошибок, иначе фрэймворк откажется его принимать.

При обработке данных, получаемых по ссылке есть несколько особенностей: необходимо выполнить запрос на бэкенд, а для выполнения запроса лучше использовать асинхронную функцию. Для выполнения запросов есть инструмент axios.

npm install axios

https://github.com/axios/axios - По этой ссылке официальная документация

В скрипте компонента запрос идёт в Vuex store:

import {computed, onMounted} from "vue";
import { useStore } from "vuex";
const store = useStore();

const catalogs = computed(() => {
  return store.state.catalogs.data;
});

onMounted(() => {
  store.dispatch("fetchCatalogs");
});

В файле store/index.js реализуем метод fetchUsers, который непосредственно и делает сам запрос на бэкенд:

  actions: {
    async fetchUsers({ commit }) {
      try {
        const data = await axios.get(
            "https://jsonplaceholder.typicode.com/users"
        );
        commit("SET_USERS", data.data);
      } catch (error) {
        alert(error);
        console.log(error);
      }
    },
  }