Отправка GET-запросов
Для отправки GET-запросов и получения данных из внешнего API в React, мы можем использовать функцию fetch или библиотеку, такую как Axios или Fetch API. Давайте рассмотрим пример использования Axios:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function DataFetching() {
const [data, setData] = useState(null);
useEffect(() => {
axios.get('https://api.example.com/data')
.then(response => {
setData(response.data);
})
.catch(error => {
console.error(error);
});
}, []);
if (!data) {
return <div>Loading...</div>;
}
return (
<div>
<h1>Data from API:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}В этом примере мы использовали хук useEffect для выполнения GET-запроса к API при монтировании компонента. Мы используем библиотеку Axios для отправки запроса и получения данных. Полученные данные сохраняются в состоянии с помощью хука useState, и затем они отображаются на странице.
Отправка POST-запросов
Для отправки POST-запросов и отправки данных на сервер из React-приложения мы также можем использовать функцию fetch, Axios или другие библиотеки. Вот пример использования функции fetch:
import React, { useState } from 'react';
function DataPosting() {
const [data, setData] = useState('');
const [response, setResponse] = useState('');
const handleSubmit = async e => {
e.preventDefault();
try {
const response = await fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ data }),
});
const result = await response.json();
setResponse(result);
} catch (error) {
console.error(error);
}
};
return (
<div>
<h1>Send Data to API:</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
value={data}
onChange={e => setData(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
{response && (
<div>
<h2>Response:</h2>
<pre>{JSON.stringify(response, null, 2)}</pre>
</div>
)}
</div>
);
}В этом примере мы создали форму, в которой пользователь может ввести данные. При отправке формы вызывается обработчик handleSubmit, который отправляет POST-запрос на сервер с помощью функции fetch. После получения ответа, результат отображается на странице.
Заключение
В этой статье мы рассмотрели, как взаимодействовать с внешними API и интегрировать их в React-приложения для получения и отправки данных. Вы можете использовать функцию fetch, Axios или другие библиотеки для работы с API. Знание этих техник поможет вам создавать более динамические и интерактивные приложения на React.
