fetch или библиотеки, такие как axios.
#### Пример с использованием fetch:
```jsx
import React, { useState, useEffect } from "react";
const MyComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => setData(data))
.catch((error) => console.error("Error fetching data:", error));
}, []);
return (
{JSON.stringify(data, null, 2)} : "Loading..."}
axios:
```jsx
import React, { useState, useEffect } from "react";
import axios from "axios";
const MyComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
axios
.get("https://api.example.com/data")
.then((response) => setData(response.data))
.catch((error) => console.error("Error fetching data:", error));
}, []);
return (
{JSON.stringify(data, null, 2)} : "Loading..."}
useEffect:
- Выполнение асинхронных операций при монтировании или обновлении компонента.
- Пример:
```javascript
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};
fetchData();
}, []);
```
1. Использование async/await:
- Облегчение работы с асинхронными операциями внутри функций.
- Пример:
```javascript
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};
```
1. Использование axios:
- Библиотека для упрощения HTTP-запросов.
- Пример:
```javascript
import axios from 'axios';
useEffect(() => {
axios.get('https://api.example.com/data')
.then(response => setData(response.data))
.catch(error => console.error(error));
}, []);
```
1. Использование React Query:
- Библиотека для управления состоянием асинхронных данных.
- Пример для React Query 3. В TanStack Query 5 используется пакет @tanstack/react-query и объект параметров useQuery:
```javascript
import { useQuery } from 'react-query';
const { data, error, isLoading } = useQuery('data', () =>
fetch('https://api.example.com/data').then(res => res.json())
);
```
Паттерны для работы с асинхронностью в React включают использование хуков useEffect, синтаксиса async/await, библиотеки axios, и React Query для управления состоянием асинхронных данных.
:::note[Ссылки для изучения]
1. [Получение данных, async/await и гонки ответов в useEffect](https://ru.react.dev/reference/react/useEffect)
:::
---
## Как Promise.all ведет себя при отклонении одного Promise? [#q-transfer-0440]
`Promise.all` возвращает promise, который fulfilled массивом результатов в порядке входных элементов, когда выполнены все. Если любой вход отклоняется, общий promise отклоняется первой наблюдаемой причиной без ожидания результата остальных. Запущенные операции при этом не отменяются и могут продолжить менять состояние. Для отмены `fetch` нужен общий `AbortController`, а другие API должны поддерживать собственный механизм cancellation. Ошибки продолжающих операций следует учитывать, особенно если у них есть побочные эффекты. Если нужны все исходы, даже при части ошибок, используют `Promise.allSettled`.
:::note[Ссылки для изучения]
1. [Promise.all: результаты и первое отклонение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
2. [Promise.all при ошибке одного Promise. Какие-то уроки \[Frontend\], с 39:46](https://www.youtube.com/watch?v=wx5qS8KlQAg&t=2386s)
:::
---
## Когда использовать Promise.allSettled вместо Promise.all? [#q-transfer-0441]
`Promise.allSettled` ждёт завершения всех входов и возвращает массив в исходном порядке. Каждый элемент имеет `status: fulfilled` с `value` либо `status: rejected` с `reason`. Он подходит для независимых запросов, где можно показать частичный результат, собрать все ошибки или выполнить пакет best-effort. `Promise.all` лучше, если без одного результата дальнейшая работа не имеет смысла и нужно рано перейти в обработку ошибки. `allSettled` не делает операцию успешной и не отменяет задачи; вызывающий код обязан разобрать оба статуса и решить, какие ошибки допустимы.
:::note[Ссылки для изучения]
1. [Promise.allSettled и частичные результаты запросов](https://learn.javascript.ru/promise-api)
2. [Promise.allSettled и результаты всех операций. Какие-то уроки \[Frontend\], с 40:13](https://www.youtube.com/watch?v=wx5qS8KlQAg&t=2413s)
:::
---
## Как не допустить гонку ответов нескольких запросов в React? [#q-transfer-0442]
При смене параметра старый запрос отменяют в cleanup через `AbortController`, если транспорт поддерживает cancellation. Одной отмены недостаточно: ответ мог завершиться одновременно или библиотека не остановила всю цепочку. Поэтому каждому запуску присваивают request ID либо замыкают флаг актуальности и обновляют state только для последнего активного запроса. Cleanup также запрещает update после размонтирования. Библиотеки server state решают часть задачи по cache key, но mutation и ручные эффекты всё равно требуют ясной семантики. Ошибку `AbortError` не показывают как пользовательский сбой.
:::note[Ссылки для изучения]
1. [useEffect: зависимости, cleanup и получение данных](https://ru.react.dev/reference/react/useEffect)
:::
---
## Что именно выбирает Promise.race? [#q-transfer-0461]
`Promise.race` возвращает promise, который принимает состояние первого settled входа: fulfilled или rejected. Это не обязательно самый быстрый успешный результат. Таймаут часто реализуют гонкой операции с promise, который отклоняется после таймера, но проигравшая операция продолжает выполняться. Для `fetch` после таймаута нужно вызвать `AbortController.abort()` и очистить таймер; для других задач cancellation зависит от API. Пустой iterable оставляет результат pending навсегда. Порядок элементов влияет только если несколько входов уже settled к моменту обработки, поэтому на него не строят бизнес-гарантии.
:::note[Ссылки для изучения]
1. [Promise.race: первый завершённый Promise](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/race)
2. [Promise.race и первая завершившаяся операция. Какие-то уроки \[Frontend\], с 42:34](https://www.youtube.com/watch?v=wx5qS8KlQAg&t=2554s)
:::