Основы разработки фронтенда - Запросы на бэкенд и авторизация - Axios

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

npm install axios

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

Функции, в которых будем делать запросы на бэкенд лучше делать асинхронными, и можем помещать их в специальное свойство экспорта methods

import axios from "axios";
export default {
  name: 'User',
  data() {
    return {
      users: [],
    };
  },
  methods: {
    async load() {
      const { data } = await axios.get(`https://randomuser.me/api/?results=6`);
      this.users = data.results;
    },
  },
  beforeMount() {
    this.load();
  },
}

После того, как переменная users будет сгенерирована, в тэге templates с ней можно работать как с обычными массивами (если возвращается массив, с использованием атрибута v-for) или выводить значения через объект.

Можем усовершенствовать функцию load(), добавив входящий параметр. Так же обратите внимание, что мы можем не использовать beforeMount, а вызывать её непосредственно, в методе data():

import axios from "axios";
export default {
  name: 'User',
  data() {
    this.load(6);
    return {
      users: null,
    };
  },
  methods: {
    async load(number) {
      const data = await axios.get(`https://randomuser.me/api/?results=${number}`);
      this.users = data.data.results;
    },
  },
}