• Wstęp
  • Co to jest fetch() w React?
  • Dlaczego warto używać fetch() w React?
  • Konfigurowanie fetch() w React
  • Wykonywanie żądania GET za pomocą fetch()
  • Obsługa fetch() błędów
  • Wykonywanie żądań POST za pomocą fetch()
  • Wniosek

Wstęp

W nowoczesnym tworzeniu stron internetowych pobieranie danych jest istotną częścią tworzenia dynamicznych i interaktywnych aplikacji. W React istnieją różne sposoby pobierania danych z API lub serwera, a jedną z popularnych metod jest użycie funkcji fetch(). Ta funkcja umożliwia wysyłanie żądań HTTP i pobieranie danych z serwera.

Ten tutorial krok po kroku przeprowadzi Cię przez proces używania fetch() w React do pobierania danych, obsługi błędów oraz wykonywania żądań GET i POST. Więc zanurzmy się!

Co to jest fetch() w React?

fetch() to wbudowana funkcja JavaScript, która umożliwia wysyłanie żądań HTTP w celu pobrania zasobów z serwera. Jest to nowoczesny zamiennik tradycyjnego obiektu XMLHttpRequest, zapewniający prostsze i bardziej elastyczne API.

W React fetch() może być używany w połączeniu z metodą cyklu życia componentDidMount() do pobierania danych z API zaraz po zamontowaniu komponentu w DOM. Zwraca obietnicę, która jest odpowiedzią z serwera, która może być następnie wykorzystana do obsługi pobranych danych.

Dlaczego warto używać fetch() w React?

Używanie fetch() w React ma kilka zalet:

  1. Prostota: fetch() zapewnia prostsze i bardziej intuicyjne API w porównaniu do XMLHttpRequest, dzięki czemu jest łatwiejsze w użyciu i zrozumieniu.
  2. Elastyczność: fetch() umożliwia pracę z różnymi typami danych, w tym danymi JSON, tekstowymi i binarnymi. Umożliwia także skonfigurowanie różnych opcji żądań, takich jak nagłówki i uwierzytelnianie.
  3. Zgodność z przeglądarkami: fetch() jest obsługiwany przez wszystkie nowoczesne przeglądarki i nie wymaga żadnych dodatkowych bibliotek ani wypełniaczy.
  4. Obietnice: fetch() zwraca obietnicę, która ułatwia obsługę operacji asynchronicznych i obsługę błędów.

Teraz, gdy rozumiemy korzyści płynące z używania fetch(), zobaczmy, jak skonfigurować to w aplikacji React.

Konfigurowanie fetch() w React

Zanim będziemy mogli zacząć używać fetch() w React, musimy upewnić się, że nasz projekt ma niezbędne zależności. Ponieważ fetch() jest wbudowaną funkcją przeglądarki, nie musimy instalować żadnych dodatkowych pakietów. Jeśli jednak pracujesz ze starszą przeglądarką, może być konieczne użycie elementu wypełniającego, takiego jak „whatwg-fetch”, aby zapewnić kompatybilność.

Kiedy już ustalimy zależności, możemy zacząć używać fetch() w naszych komponentach React. Aby zilustrować proces, utwórzmy prosty komponent o nazwie „DataFetcher”, który pobiera dane z interfejsu API.

import { useEffect } from 'react';
function DataFetcher () {
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // Handle the fetched data here
      })
      .catch(error => {
        // Handle any errors
      });
  }, []}
  
  return <div>Data Fetcher Component</div>;
}
export default DataFetcher;

W powyższym kodzie używamy funkcji fetch() wewnątrz metody cyklu życia useEffect(). Dzięki temu proces pobierania danych zostanie uruchomiony natychmiast po zamontowaniu komponentu w DOM.

Wykonywanie żądania GET za pomocą fetch()

Teraz, gdy skonfigurowaliśmy fetch() w naszej aplikacji React, zobaczmy, jak wykonać żądanie GET w celu pobrania danych z API.

Aby wykonać żądanie GET, musimy podać adres URL API, z którego chcemy pobrać dane. W poniższym przykładzie pobierzemy listę użytkowników z punktu końcowego „https://api.example.com/users:

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    // Handle the fetched data here
  })
  .catch(error => {
    // Handle any errors
  });

W tym fragmencie kodu najpierw wywołujemy fetch() z adresem URL punktu końcowego interfejsu API. Następnie łączymy metodę .then() w celu obsługi odpowiedzi z serwera. W tym przypadku wywołujemy metodę .json() na obiekcie odpowiedzi, aby przeanalizować odpowiedź jako dane JSON.

Następnie możemy uzyskać dostęp do pobranych danych w ramach drugiego wywołania zwrotnego .then(). Tutaj możesz manipulować danymi, aktualizować stan komponentu lub wykonywać inne niezbędne działania.

Jeśli podczas procesu pobierania wystąpi błąd, zostanie wywołana metoda .catch(), która umożliwi odpowiednią obsługę błędu.

Obsługa fetch() błędów

Podczas korzystania z fetch() ważne jest, aby zająć się wszelkimi błędami, które mogą wystąpić podczas procesu pobierania danych. Istnieje kilka typowych typów błędów, które możesz napotkać, takich jak błędy sieciowe, błędy serwera lub nieprawidłowe odpowiedzi interfejsu API.

Aby obsłużyć błędy za pomocą fetch(), możemy użyć metody .catch() w naszym łańcuchu pobierania. Metoda .catch() pozwala nam przechwycić odrzucone obietnice i wykonać niezbędną logikę obsługi błędów.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // Handle the fetched data here
  })
  .catch(error => {
    // Handle any errors
    console.error('Error:', error);
  });

W powyższym przykładzie dodajemy proste sprawdzanie błędów w pierwszym wywołaniu zwrotnym .then(). Jeśli status odpowiedzi nie jest OK, zgłaszamy błąd za pomocą słowa kluczowego throw. Spowoduje to wywołanie zwrotne .catch() i umożliwi nam odpowiednią obsługę błędu.

Pamiętaj, aby podawać zrozumiałe komunikaty o błędach i obsługiwać błędy w oparciu o ich typ, aby zapewnić użytkownikom jasne zrozumienie, co poszło nie tak.

Wykonywanie żądań POST za pomocą fetch()

Oprócz pobierania danych, fetch() może być również używany do wysyłania danych do serwera poprzez wysyłanie żądań POST. Jest to często używane podczas tworzenia, aktualizowania lub usuwania danych na serwerze.

Aby wykonać żądanie POST za pomocą fetch(), musimy przekazać funkcji fetch() dodatkowe opcje, w tym metodę HTTP, nagłówki i dane do wysłania.

Oto przykład wykonania żądania POST w celu utworzenia nowego użytkownika:

const userData = {
  name: 'John Doe',
  age: 30,
  email: '[email protected]',
};
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userData),
})
  .then(response => response.json())
  .then(data => {
    // Handle the response data here
  })
  .catch(error => {
    // Handle any errors
  });

W tym przykładzie definiujemy obiekt userData zawierający dane, które chcemy wysłać do serwera. Podajemy również metodę HTTP jako "POST" i ustawiamy nagłówek "Content-Type" na "application/json", aby wskazać, że wysyłamy dane JSON.

Dane są konwertowane do formatu JSON przy użyciu JSON.stringify() przed wysłaniem jako body żądania POST.

Wniosek

W tym samouczku omówiliśmy proces używania fetch() w React do pobierania danych z serwera. Omówiliśmy korzyści płynące z używania fetch(), jak skonfigurować go w aplikacji React oraz jak tworzyć żądania GET i POST. Omówiliśmy także obsługę błędów i omówiliśmy różne scenariusze, w których fetch() może być przydatny.

Wykorzystując możliwości fetch(), możesz tworzyć dynamiczne i interaktywne aplikacje React, które płynnie współdziałają ze zdalnymi interfejsami API i serwerami.

Pamiętaj, aby ćwiczyć i eksperymentować z fetch() we własnych projektach, aby lepiej zrozumieć jego możliwości. Miłego kodowania!

Miło było to przeczytać? Podziel się nim z innymi.

Naciśnij przycisk 👏 poniżej tyle razy, ile to możliwe, aby pokazać swoje wsparcie!

Dziękuję za przeczytanie. Pozdrawiam!!!. Jesteś niesamowity!

Dzielenie się oznacza troskę. Udostępniajcie więc jak najwięcej ;-)

Sprawdź moje portfolio!