@olen.shanahan
В React.js вы можете сделать AJAX-запросы с помощью встроенных средств JavaScript, таких как fetch
или XMLHttpRequest
.
Вот пример использования fetch
для выполнения GET-запроса и обработки полученных данных:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React, { useEffect, useState } from 'react'; const MyComponent = () => { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); const responseData = await response.json(); setData(responseData); } catch (error) { console.error('Error:', error); } }; fetchData(); }, []); return ( {data ? ( {data.map(item => ( {item.name} ))} ) : ( Loading... )} ); }; export default MyComponent; |
В этом примере мы используем хук useEffect
, чтобы сделать AJAX-запрос при монтировании компонента. Мы затем получаем данные с помощью метода response.json()
, чтобы преобразовать ответ в формат JSON. После этого мы устанавливаем полученные данные в состояние компонента с помощью функции setData
. Возвращаемая разметка рендерит полученные данные в виде списка, если они присутствуют, или отображает сообщение "Loading..." в противном случае.