Как делать GET-запросы с Axios: руководство для начинающих

При разработке веб-приложений получение данных из API — распространенная задача. JavaScript-разработчики часто начинают с встроенного метода fetch(), но вскоре сталкиваются с проблемами — такими как необходимость вручную парсить JSON-ответы и громоздкая обработка ошибок. Axios упрощает выполнение HTTP-запросов, особенно GET-запросов, предлагая автоматический парсинг JSON, улучшенную обработку ошибок и более простую настройку запросов.

Что такое Axios?

Axios — это популярная JavaScript-библиотека для выполнения HTTP-запросов в браузерах и Node.js. В отличие от встроенного fetch(), Axios автоматически парсит JSON-ответы, последовательно обрабатывает HTTP-ошибки и поддерживает удобные функции запросов, такие как отмена и тайм-ауты.

Установка Axios

Вы можете установить Axios с помощью npm, Yarn или подключить через CDN:

npm

npm install axios

Yarn

yarn add axios

CDN

<script src=""https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js""></script>

Импортируйте Axios в ваш проект:

import axios from 'axios';
// или
const axios = require('axios');

Выполнение базового GET-запроса

Вот как можно легко выполнить базовый GET-запрос:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Axios автоматически обрабатывает получение и парсинг JSON-ответов.

Обработка данных ответа

С Axios вам не нужны дополнительные шаги парсинга. Возвращаемый ответ содержит свойство data, уже в формате JavaScript-объекта:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    console.log(res.data.title);  // Выводит заголовок из ответа
  });

Обработка ошибок в GET-запросах Axios

Axios интуитивно обрабатывает ошибки, перехватывая как HTTP, так и сетевые проблемы. Вот как можно четко управлять этими ошибками:

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('HTTP error:', error.response.status);
    } else if (error.request) {
      console.error('No response:', error.request);
    } else {
      console.error('Request setup error:', error.message);
    }
  });

Использование параметров запроса в GET-запросах Axios

Отправка параметров запроса с Axios проста:

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: { userId: 1 }
})
.then(response => {
  console.log(response.data);
});

Axios автоматически форматирует эти параметры в строку запроса.

Использование Async/Await с Axios

Синтаксис Async/Await делает запросы Axios более читаемыми:

async function fetchPosts() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchPosts();

Это делает ваш код проще и чище.

Установка заголовков в GET-запросах Axios

Вы можете легко устанавливать заголовки (например, токены аутентификации):

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_API_TOKEN'
  }
})
.then(response => {
  console.log(response.data);
});

Это позволяет без усилий включать пользовательские заголовки.

Выполнение нескольких GET-запросов с Axios

Если вам нужно несколько запросов одновременно, Axios упрощает это:

const request1 = axios.get('https://jsonplaceholder.typicode.com/posts');
const request2 = axios.get('https://jsonplaceholder.typicode.com/users');

axios.all([request1, request2])
  .then(([posts, users]) => {
    console.log('Posts:', posts.data);
    console.log('Users:', users.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Обработка одновременных запросов Axios делает ваш код эффективным.

Заключение

Axios упрощает HTTP GET-запросы в JavaScript, устраняя утомительные задачи, такие как парсинг JSON и сложную обработку ошибок. Независимо от того, отправляете ли вы простые запросы, используете параметры запроса, пользовательские заголовки или выполняете несколько одновременных запросов, Axios помогает писать более чистый и поддерживаемый код.

Часто задаваемые вопросы

Могу ли я использовать Axios в Node.js?

Да, Axios работает одинаково хорошо как в среде Node.js, так и в браузере.

В чем основное отличие между Axios и Fetch?

Axios предоставляет автоматический парсинг JSON, лучшую обработку ошибок и дополнительные функции, такие как отмена запроса, в то время как Fetch минималистичен и встроен в браузеры.

Может ли Axios обрабатывать методы, отличные от GET?

Да, Axios поддерживает POST, PUT, DELETE и все стандартные HTTP-методы.