🤔 Где писать запросы к серверу?

Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода.

🚩Использование хуков

useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🚩Методы жизненного цикла в классовых компонентах

Метод componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.

import React, { Component } from 'react';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? (
          <pre>{JSON.stringify(data, null, 2)}</pre>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default DataFetchingComponent;

🟠Сервисы или утилиты
Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым.
service.js

export async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

DataFetchingComponent.js

import React, { useState, useEffect } from 'react';
import { fetchData } from './service';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData()
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🟠Управление состоянием
Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX.

Ставь 👍 и забирай 📚 Базу знаний