Используем axios во Vue приложениях.

При разработке Vue приложений, рано или поздно возникает необходимость использовать какой-то инструмент для взаимодействия со сторонними API.

Для того, чтобы повзаимодействовать с этим сторонним API нужно выполнить http запрос. 

Этот http запрос можно сделать разными способами:

1) С помощью встроенного в javascript объекта XHR

Запросы, которые вы будете писать таким способом, будут содержать достаточно много кода и не очень хорошо читаются. На практике приходится довольно редко видеть применение такого способа взаимодействия с API.

2) С помощью библиотеки jQuery и встроенного в него модуля $.ajax

Библиотека jQuery больше предназначена для работы вне реактивных фреймворков вроде Vue и др. Ее используют для упрощения взаимодействия с DOM. Использовать ее для http запросов во Vue приложении не совсем рационально. Будем слишком много лишних методов, которые не будут использоваться реально. 

По читаемости кода jquery тоже не очень хороша.

Библиотека axios

Наиболее распространенной библиотекой для выполнения http запросов на Vue на сегодняшний день является библиотека axios. 

Запросы написанные на axios отличаются минимализмом и простотой читаемости кода.

Именно по этой причине во Vue проектах чаще всего используется именно она.

Установка axios

Установка этой библиотеки в проект достаточно простая. Из корня проекта нужно выполнить консольную команду:

npm install axios

В менеджере yarn эта команда выглядит как

yarn add axios

Подробнее про работу с компонентами, как развернуть vue проект и другие вопросы работы с Vue, вы можете посмотреть в моих видеокурсах по Vue

https://webkyrs.info/razdel/vue-js-javascript-freimvork-dlia-sozdaniia-veb-prilozhenii

Сейчас я подробно на них не останавливаюсь.

Использование axios в компонентах

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

import axios from 'axios';

Простой GET запрос

Для того, чтобы выполнить простой GET запрос к стороннему API, мы можем воспользоваться следующей конструкцией:

axios.get('https://site.com/api')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Аналогичная форма записи, только с конструкцией await может выглядеть вот так:

async function fetchData() {
  try {
    const response = await axios.get('https://site.com/api');
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

fetchData();

Обратите внимание, что данные, которые приходят в ответе находятся в свойстве data объекта response.

Чаще всего сторонние API предоставляют возможность выполнять POST запрос (на добавление элемента сущности), DELETE (на удаление), UPDATE (на обновление какое-то составной части элемента сущности) и PUT (для замены данных в сущности целиком)

Запросы к такому API с помощью axios могут выглядеть следующим образом

POST

async function postData() {
  try {
    const response = await axios.post('https://site.com/api/resource', {
      // данные для создания нового ресурса
      name: 'John Doe',
      age: 25
    });
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

postData();

PATCH

async function patchData() {
  try {
    const response = await axios.patch('https://site.com/api/resource/1', {
      // данные для частичного обновления
      age: 31
    });
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

patchData();

DELETE

async function deleteData() {
  try {
    const response = await axios.delete('https://site.com/api/resource/1');
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}


deleteData();

PUT

async function updateData() {
  try {
    const response = await axios.put('https://site.com/api/resource/1', {
      // данные для обновления
      name: 'New Name',
      age: 30
    });
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}


updateData();

Передача API ключа

Иногда для выполнения запросов к стороннему API нужно передать API ключ. Чаще всего этот ключ передается в заголовках и выглядеть это может примерно так.

async function fetchData() {
  try {
    const response = await axios.get('https://site.com/api', {
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY'
      }
    });
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

В этой статье мы рассмотрели лишь основы для работы с axios во Vue приложениях. В зависимости от применяемых вами технологий, эти запросы могут каким-либо образом отличаться. 

Больше уроков по Vue, можно посмотреть моих видеокурсах

https://webkyrs.info/razdel/vue-js-javascript-freimvork-dlia-sozdaniia-veb-prilozhenii