🤔 Где писать запросы к серверу?
Запросы к серверу в 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.
Ставь 👍 и забирай 📚 Базу знаний
