Как получать данные в React: шпаргалка + примеры

ReactJS — популярная библиотека для создания пользовательских интерфейсов. Для создания динамических и интерактивных приложений разработчикам часто требуется получать данные из внешних источников, таких как API.

В этой статье мы рассмотрим три популярных метода получения данных в ReactJS: Fetch API, Axios и React Query.

API извлечения

Fetch API — это собственный API браузера для выполнения HTTP-запросов. Он встроен в современные браузеры и может использоваться без каких-либо дополнительных библиотек.

Использование выборки с ReactJS

Чтобы использовать Fetch в компоненте React, вы можете вызвать метод fetch() внутри хука useEffect(), который запускается при монтировании компонента или при изменении указанных зависимостей. Это гарантирует, что данные извлекаются, когда это необходимо, и предотвращает ненужный повторный рендеринг.

Базовый синтаксис Fetch

Основной синтаксис Fetch API следующий:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Метод fetch() возвращает обещание, которое разрешается в объект Response, представляющий ответ на запрос. Метод response.json() используется для извлечения данных JSON из ответа.

Обработка данных JSON

Получив данные JSON из API, вы можете сохранить их в состоянии вашего компонента с помощью хука useState() и обновить состояние с помощью полученных данных.

import React, { useState, useEffect } from "react";
function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch("https://api.example.com/data")
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []);
  return (
    // render the data
  );
}
export default App;

Аксиос

Axios — это популярная сторонняя библиотека для выполнения HTTP-запросов в JavaScript. Он предлагает дополнительные функции по сравнению с Fetch API, такие как автоматическое преобразование данных JSON и упрощенная обработка ошибок.

Установка Аксиос

Чтобы установить Axios, вы можете использовать npm или yarn:

npm install axios
yarn add axios

Использование Axios с ReactJS

Чтобы использовать Axios в компоненте React, сначала импортируйте его, а затем вызовите методы Axios внутри хука useEffect(), аналогично тому, как вы используете Fetch API.

import React, { useState, useEffect } from "react";
import axios from "axios";
function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    axios.get("https://api.example.com/data")
      .then(response => setData(response.data))
      .catch(error => console.error(error));
  }, []);
  return (
    // render the data
  );
}
export default App;

Аксиос Методы

Axios предоставляет методы для всех глаголов HTTP, таких как get, post, put, delete и других. Эти методы возвращают обещание, которое преобразуется в объект ответа, содержащий данные и другую информацию о запросе.

axios.get(url, config)
axios.post(url, data, config)
axios.put(url, data, config)
axios.delete(url, config)

Реагировать на запрос

React Query — это библиотека для извлечения, кэширования и синхронизации данных в приложениях React. Он предоставляет набор хуков для простого управления состоянием сервера и управления им.

Установка Реагирующего запроса

Чтобы установить React Query, используйте npm или yarn:

npm install react-query
yarn add react-query

Использование React Query с ReactJS

Чтобы использовать React Query, вам сначала нужно импортировать QueryClient и QueryClientProvider из библиотеки и обернуть приложение компонентом QueryClientProvider.

import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      // render your components here
    </QueryClientProvider>
  );
}

Реагировать на крючки запросов

React Query предоставляет хуки, такие как useQuery(), для извлечения данных и автоматического кэширования и обновления данных при необходимости. Хук useQuery() принимает ключ запроса и функцию, которая возвращает обещание.

import { useQuery } from "react-query";
import axios from "axios";
function fetchData() {
  return axios.get("https://api.example.com/data");
}
function DataComponent() {
  const { isLoading, error, data } = useQuery("fetchData", fetchData);
  if (isLoading) return "Loading...";
  if (error) return "An error occurred: " + error.message;
  return (
    // render the data
  );
}

Обработка ошибок

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

Обработка ошибок с помощью Fetch

С помощью Fetch API вы можете обрабатывать ошибки, используя метод catch() объекта Promise. Однако это не перехватывает ошибки HTTP, такие как 404 или 500. Чтобы обработать их, вы можете проверить свойство response.ok и выдать ошибку, если оно ложно.

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(data => setData(data))
  .catch(error => console.error(error));

Обработка ошибок с помощью Axios

Axios автоматически выдает ошибку для любых кодов состояния, отличных от 2xx. Вы можете поймать эти ошибки, используя метод catch() объекта Promise.

axios.get(url)
  .then(response => setData(response.data))
  .catch(error => console.error(error));

Обработка ошибок с помощью React Query

React Query автоматически обрабатывает ошибки и предоставляет объект error в объекте, возвращаемом хуком useQuery(). Вы можете использовать этот объект для отображения сообщений об ошибках или выполнения других действий при возникновении ошибки.

import { useQuery } from "react-query";
import axios from "axios";
function fetchData() {
  return axios.get("https://api.example.com/data");
}
function DataComponent() {
  const { isLoading, error, data } = useQuery("fetchData", fetchData);
  if (isLoading) return "Loading...";
  if (error) return "An error occurred: " + error.message;
  return (
    // render the data
  );
}

Заключение

В этой статье мы рассмотрели три популярных метода получения данных в ReactJS: Fetch API, Axios и React Query. Каждый способ имеет свои преимущества, и выбор зависит от ваших требований и предпочтений. Fetch API — это собственное решение с базовыми функциями, в то время как Axios и React Query предлагают более продвинутые функции и улучшенную обработку ошибок. Поняв эти методы и варианты их использования, вы сможете выбрать наиболее подходящий для своего приложения React.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .