Как сделать HTTP-запрос в React?react-85

import { useState, useEffect } from 'react';

function FetchExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return <div>{JSON.stringify(data)}</div>;
}

npm install axios

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

function AxiosExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  // ...аналогичный рендеринг
}

npm install react-query

import { useQuery } from 'react-query';

function ReactQueryExample() {
  const { data, isLoading, error } = useQuery('todos', () =>
    fetch('https://api.example.com/todos').then(res => res.json())
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
}

axios.get('/api/users')
  .then(response => console.log(response.data));

axios.post('/api/users', { name: 'John' })
  .then(response => console.log(response.data));

axios.put('/api/users/1', { name: 'Updated John' });
axios.patch('/api/users/1', { name: 'Partial Update' });

axios.delete('/api/users/1');

const [state, setState] = useState({
  data: null,
  loading: true,
  error: null
});

useEffect(() => {
  const fetchData = async () => {
    try {
      const result = await axios.get('/api/data');
      setState({ data: result.data, loading: false, error: null });
    } catch (error) {
      setState({ data: null, loading: false, error: error.message });
    }
  };

  fetchData();
}, []);

useEffect(() => {
  const controller = new AbortController();

  const fetchData = async () => {
    try {
      const response = await fetch('/api/data', {
        signal: controller.signal
      });
      // обработка данных
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Fetch error:', error);
      }
    }
  };

  fetchData();

  return () => controller.abort();
}, []);

function useFetch(url) {
  const [state, setState] = useState({
    data: null,
    loading: true,
    error: null
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(url);
        setState({ data: response.data, loading: false, error: null });
      } catch (error) {
        setState({ data: null, loading: false, error: error.message });
      }
    };

    fetchData();
  }, [url]);

  return state;
}

// Использование:
const { data, loading, error } = useFetch('/api/data');