Обработка API в JavaScript и React: от основ до продвинутого уровня

👋 Привет, фронтендеры!

Сегодня разберём одну из важнейших тем в мире JavaScript и React — работу с API. Мы узнаем, как отправлять HTTP-запросы, обрабатывать ошибки и использовать популярные библиотеки, такие как fetch, axios и TanStack Query.

📡 Что такое API?

API (Application Programming Interface) — это интерфейс, через который программы обмениваются данными между собой. Например, ваш React-приложение может получать посты с удалённого сервера через API.

🛠️ Часто API создаются с использованием фреймворков:

• JavaScript — Express.js

• Python — Django / Flask

• Go — Gin

• Java — Spring Boot

• C# — ASP.NET Core

🔄 Что такое обработка API?

Обработка API — это процесс отправки HTTP-запросов к серверу и обработки полученного ответа. В JavaScript и React чаще всего используют:

• fetch — встроенный метод браузера

• axios — популярная внешняя библиотека

• TanStack Query (ранее React Query) — библиотека для удобного управления асинхронными данными в React

📬 Основные HTTP-методы

⚙️ Работа с API через fetch

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

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(data => scrib.show(data))
  .catch(err => scrib.show('Ошибка:', err));

POST-запрос с телом

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'JS — это круто!',
    body: 'Scribbler позволяет комбинировать HTML и JS',
    userId: 1
  })
})
  .then(res => res.json())
  .then(data => scrib.show(data))
  .catch(err => scrib.show('Ошибка:', err));

Обработка ошибок через try/catch

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) throw new Error('Ошибка сети');
    const data = await response.json();
    scrib.show(data);
  } catch (err) {
    scrib.show('Ошибка:', err);
  } finally {
    scrib.show('Запрос завершён');
  }
}
getData();

⚡ Использование axios

axios предлагает более чистый синтаксис и удобную обработку ошибок.

GET-запрос

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => scrib.show(res.data))
  .catch(err => scrib.show('Ошибка:', err));

POST-запрос

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'Axios рулит!',
  body: 'Обработка ошибок гораздо проще',
  userId: 1
}, {
  headers: { 'Content-Type': 'application/json' }
})
  .then(res => scrib.show(res.data))
  .catch(err => scrib.show('Ошибка:', err));

Расширенная обработка ошибок

axios.get('https://jsonpl.typicode.com/posts')
  .catch(error => {
    if (error.response) {
      scrib.show('Ошибка от сервера:', error.response.status);
    } else if (error.request) {
      scrib.show('Нет ответа от сервера');
    } else {
      scrib.show('Ошибка запроса:', error.message);
    }
  });

⚛️ API в React (useEffect + useState)

import { useEffect, useState } from 'react';

function Posts() {
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        if (!res.ok) throw new Error('Ошибка при получении данных');
        return res.json();
      })
      .then(setPosts)
      .catch(err => setError(err.message));
  }, []);

  if (error) return <p>Ошибка: {error}</p>;

  return (
    <div>
      <h2>Посты</h2>
      <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </div>
  );
}

⚙️ TanStack Query (React Query)

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  const { data: posts, error, isLoading } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts
  });

  if (isLoading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error.message}</p>;

  return <ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}</ul>;
}

✅ Выводы

📌 Обработка API — ключевой навык в веб-разработке. Главное:

• Освоить fetch и axios

• Понимать HTTP-методы

• Уметь обрабатывать ошибки

• Использовать useEffect в React

• Автоматизировать загрузку данных с помощью TanStack Query