В этой статье мы рассмотрим, как создать собственный хук useFetchв React.js, используя метод цепочки fetch-then-catch. Хук useFetchпозволяет нам упростить вызовы API в наших компонентах React и корректно обрабатывать ошибки. Мы углубимся в различные методы и предоставим примеры кода, демонстрирующие их использование.

Методы для хука useFetch:

Метод 1: базовая цепочка «выбрать-затем-переловить»

import { useState, useEffect } from 'react';
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Request failed');
        }
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, loading, error };
};

Метод 2: добавление заголовков запроса

// Inside fetchData function
const fetchData = async () => {
  const headers = new Headers();
  headers.append('Authorization', 'Bearer YOUR_TOKEN');
  try {
    const response = await fetch(url, { headers });
    // Rest of the code...
  } catch (error) {
    // Rest of the code...
  }
};

Метод 3: передача параметров запроса

// Inside fetchData function
const fetchData = async () => {
  const params = new URLSearchParams({ page: 1, limit: 10 });
  try {
    const response = await fetch(`${url}?${params}`);
    // Rest of the code...
  } catch (error) {
    // Rest of the code...
  }
};

Метод 4: обработка AbortController для отмены

// Inside fetchData function
const fetchData = async () => {
  const controller = new AbortController();
  const signal = controller.signal;
  setTimeout(() => controller.abort(), 5000); // Abort after 5 seconds
  try {
    const response = await fetch(url, { signal });
    // Rest of the code...
  } catch (error) {
    // Rest of the code...
  }
};

Метод 5. Настройка параметров получения

// Inside fetchData function
const fetchData = async () => {
  const options = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: 'value' }),
  };
  try {
    const response = await fetch(url, options);
    // Rest of the code...
  } catch (error) {
    // Rest of the code...
  }
};

Реализуя перехватчик useFetchс методом цепочки fetch-then-catch, мы можем оптимизировать вызовы API в наших приложениях React.js. Мы исследовали различные методы, включая базовое связывание, добавление заголовков, передачу параметров запроса, обработку отмены и настройку параметров выборки. Эти методы обеспечивают гибкость и контроль при работе с API.