Изучение Axios в TypeScript: полное руководство по HTTP-запросам

Axios – популярная библиотека JavaScript, которая упрощает выполнение HTTP-запросов из браузера или Node.js. В сочетании с TypeScript он обеспечивает повышенную безопасность типов, что делает его мощным инструментом для создания надежных приложений с проверкой типов. В этой статье мы рассмотрим различные методы, доступные в Axios, с использованием TypeScript, а также примеры кода.

  1. Выполнение запроса GET.
    Наиболее распространенным HTTP-запросом является GET, который используется для получения данных с сервера. Вот пример использования Axios с TypeScript для выполнения запроса GET:
import axios from 'axios';
axios.get('https://api.example.com/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });
  1. Выполнение запроса POST:
    Чтобы отправить данные на сервер, мы используем запрос POST. С помощью Axios и TypeScript сделать POST-запрос очень просто:
import axios from 'axios';
const data = {
  name: 'John Doe',
  email: 'johndoe@example.com',
};
axios.post('https://api.example.com/users', data)
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });
  1. Обработка ошибок.
    Axios предоставляет надежный механизм обработки ошибок. Вот пример обработки ошибок с помощью TypeScript:
import axios, { AxiosError } from 'axios';
axios.get('https://api.example.com/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error: AxiosError) => {
    if (error.response) {
      console.log(error.response.status);
    } else {
      console.error(error.message);
    }
  });
  1. Настройка заголовков запросов.
    Вы можете установить собственные заголовки в запросах Axios. Вот пример настройки заголовков с помощью TypeScript:
import axios from 'axios';
const headers = {
  Authorization: 'Bearer <your_token_here>',
};
axios.get('https://api.example.com/users', { headers })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

В этой статье мы рассмотрели различные методы, доступные в Axios, для выполнения HTTP-запросов с использованием TypeScript. Мы рассмотрели запросы GET и POST, обработку ошибок и настройку пользовательских заголовков. Используя возможности TypeScript, вы можете обеспечить безопасность типов и создавать более надежные приложения с помощью Axios.

Применив эти методы, вы будете хорошо подготовлены к обработке различных сценариев HTTP-запросов в ваших проектах TypeScript с использованием Axios.