Делай запросы в React современно

Существует несколько способов получения данных в React приложении. В этой статье обзорно посмотрим какие.

Начнем с классического Fetch. API Fetch – это встроенный в браузер API для получения ресурсов, включая данные с сервера. Он возвращает Promise, который разрешается в объект ответа. Вы можете использовать API Fetch в сочетании с хуком useEffect в React для получения данных и обновления состояния компонента.

import { useState, useEffect } from 'react';

const Component = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/some/url')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <h1>Список полученных данных:</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Axios - популярная библиотека для выполнения HTTP-запросов из браузера или среды Node.js. Она возвращает Promise, который разрешается в объект ответа. Вы можете использовать Axios в сочетании с хуком useEffect в React для получения данных и обновления состояния компонента.

import { useState, useEffect } from 'react';
import axios from 'axios';

const Component = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/some/url')
      .then(response => setData(response.data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <h1>Список полученных данных:</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

И наконец есть отличная библиотека react-query, которая отлично подойдет для работы с данными

import { useQuery } from 'react-query';

const Component = () => {
  const { isLoading, error, data } = useQuery(' data', () =>
    fetch('/api/some/url').then((res) =>
      res.json()
    )
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.content}</li>
        ))}
      </ul>
    </div>
  );
}

Прелесть в том, что мы можем совмещать работы react-query с другими способами, но при этом получим возвращаемые библиотекой данные из запроса и его состояние. Убирается лишний код, который отслеживает состояние запросы, сразу опираемся на isLoading в построении нашего UI.

Статья обзорно показывает способы получения данных с помощью запросов. Я намеренно не брал другие способы и, как показывает практика, react-query сильно упрощает жизнь при написании однотипного кода в сравнении с другими способами, когда не обкладываешься кучей условий и экшенов для отслеживания состояния запроса.

Если понравилась история, то подпишись на мой Телеграм канал

Начать дискуссию

В России вступил в силу закон о самозапрете на выдачу кредитов и займов

Установить ограничение можно на Госуслугах.

1 ответ на пост

разместить

Батюшка Бизнесменский

Личный опыт

2ч

Думали, свихнёмся: Купили "шалаш" за 4 млн рублей и вложили ещё 3. Бизнес на посуточной сдаче загородных домов.

Как молодая пара путешественников решили купить дом в 2024 году для сдачи его в посуточную аренду и что из этого вышло.

1111

ALP Group

Личный опыт

27 февр

Гид для ИТ-компаний: подходы, технические решения и ноу-хау в 1С

Как выбирать архитектуру, бороться с ошибками и дорабатывать ИТ-системы — исчерпывающий дайджест статей от ALP Group.

Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Funsplash.com%2F%40alesnesetril&postId=1833670" rel="nofollow noreferrer noopener" target="_blank">Ales Nesetril</a>, Unsplash

Сергей Котовский

Ритейл

4ч

История IKEA: от маленького магазина до глобального гиганта (аналоги на рынке после ухода)

IKEA была основана в 1943 году в Швеции 17-летним предпринимателем Ингваром Кампрадом. Название компании — аббревиатура от его имени, названия семейной фермы (Elmtaryd) и деревни, где он вырос (Agunnaryd). Изначально IKEA продавала ручки, кошельки и рамки для фото, но уже в 1948 году начала специализироваться на мебели.

Феодор Ингвар Кампрад (швед. Feodor Ingvar Kamprad. 30 марта 1926 — 27 января 2018

Дмитрий Беговатов

Трибуна

2ч

Субботний самопиар на vc.ru

Делимся в комментах ссылками на свои проекты и комментируем чужие! Площадка для самопрезентации стартапов и пет-проектов 👉 Product Radar

1818

igotosochi

4ч

Итоги 44 месяцев инвестиций. 6,333 млн рублей

1 марта, значит пора жарить блины, лопать их с икрой и подводить итоги февраля. Ежемесячно я пишу отчёт о том, что произошло с моими инвестициями. Напоминаю: я начал копить на квартиру в Сочи в июле 2021. 44 месяца позади. Погнали!

2727

Чат-бот с тестированием в мини-приложении для определения стиля в одежде

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

Нина Рубштейн

2ч

Метастратегия: что это и почему она вам нужна. Ч.1.

Было бы странно рассказывать вам здесь о таком глобальном понятии без примера на собственном опыте. Поэтому сегодня я познакомлю вас с феноменом Новой Русской Школы Психологии. А еще расскажу на нашем примере, как внедрена метастратегия в наш бизнес.

Делай запросы в React современно

Fetch

Axios

React-query

Итого