Custom hook z użyciem useState() i useEffect()
Aby pobierać dane z jakiegokolwiek API za pomocą wbudowanych hooków Reacta, można wprowadzić custom hook - useFetch, który wewnętrznie wykorzystuje useState i useEffect
Ta funkcja zwraca tablicę z dwiema zmiennymi: zawartością stanu i flagą ładowania.
Domyślnie, w linii:4, widać, że zaczynamy od wartości null i false. Nic się nie ładuje.
Ale potem ustawiamy ładowanie na true w linii:8 i wewnątrz anonimowej funkcji asynchronicznej pobieramy dane.
Gdy dane zostaną zwrócone, aktualizujemy stan za pomocą funckji setState, do której jako pierszy element w tablicy przekazujemy wartość stanu i drugi element ustawiamy na false ponieważ pobieranie danych z API zostało zakończone.
Należy pamiętać, że nie można bezpośrednio wywołać asynchronicznego callbacka w useEffect. Dlatego należy zdefiniować w nim oddzielną funkcję asynchroniczną.
Skorzystałem tutaj z IIFE, czyli Immediately-invoked function expression. Jak sama nazwa mówi jest to natychmiastowo samowywołująca się funkcja. Czyli funkcja, która wykonuje się od razu.
Robimy tak gdy chcemy natychmiast wywołać funkcję i nie ma potrzeby jej definiowania a następnie wywoływania.
Możesz przekazać adres url do tablicy zależności useEffect. Dla Reacta oznacza to, aby ponownie wywołał hook useEffect() tylko wtedy, gdy zmieni się adres URL.
Aby użyć tego hooka, możesz wprowadzić go do swojego komponentu w następujący sposób:
_10 // Po zaimportowaniu hooka useFetch_10const Post = () => {_10const [post, loading] = useFetch('https://jsonplaceholder.typicode.com/posts/1');_10 _10 if (loading) {_10 return <Loading />_10 }_10_10 return <PostBody content={post} />;_10};
Jak radzić sobie z obsługą błędów w przypadku pobierania danych z API?
Tradycyjnym sposobem uzyskania danych lub informacji o błędzie z Promisa jest użycie then i catch.
_33import React, { useState, useEffect } from 'react'_33_33function FetchAPI() {_33_33 const [users, setUsers] = useState([])_33 const [isError, setIsError] = useState(false);_33_33 useEffect(() => {_33 fetch('https://jsonplaceholder.typicode.com/users').then((response) => {_33 if (response.ok) {_33 return response.json();_33 } else {_33 throw 'Error getting users list'_33 }_33 }).then((data) => {_33 setUsers(data);_33 }).catch((error) => {_33 setIsError(true)_33 })_33 }, [])_33_33 return (_33 <div>_33 {isError ? <h3> Error! Please try again later</h3> :_33 <ul>_33 {users.map((user) => <li key={user.id} > {user.name} </li>)}_33 </ul>_33 }_33 </div>_33 )_33}_33_33export default FetchAPI
Zauważ, jak zwróciliśmy dane lub komunikat o błędzie, w oparciu o odpowiedź w pierwszej funkcji wywołania zwrotnego then. Ważną rzeczą, na którą należy zwrócić uwagę w przypadku fetch API, jest to, że jeśli wystąpi błąd, taki jak 404, funkcja wywołania zwrotnego then zostanie wykonana, a funkcja wywołania zwrotnego wewnątrz catch nie zostanie wykonana. Tak więc, w oparciu o odpowiedź z serwera, musimy albo pobrać dane z odpowiedzi, albo rzucić komunikat o błędzie, który trafia do bloku catch.
W powyższym przykładzie sprawdziliśmy właściwość ok odpowiedzi. Zamiast tego można sprawdzić status odpowiedzi (na przykład 200, 404 lub 500 itp.) i podjąć odpowiednie działania.
Jak używać Fetch API async - await z try - catch w hooku useEffect w aplikacji React?
Innym powszechnie stosowanym sposobem z fetch API jest użycie async i await. Aby obsłużyć błędy, możemy użyć opcji try-catch w naszej aplikacji.
_39_39import React, { useState, useEffect } from 'react'_39_39function FetchAPI() {_39_39 const [users, setUsers] = useState([])_39 const [isError, setIsError] = useState(false);_39_39 useEffect(() => {_39_39 const fetchData = async () => {_39 try {_39 let response = await fetch('https://jsonplaceholder.typicode.com/users');_39 if (response.status === 200) {_39 let data = await response.json();_39 setUsers(data);_39 } else {_39 throw 'Error fetching users list'_39 }_39 } catch (error) {_39 setIsError(true)_39 }_39 }_39 fetchData();_39_39 }, [])_39_39 return (_39 <div>_39 {isError ? <h3> Error! Please try again later</h3> :_39 <ul>_39 {users.map((user) => <li key={user.id} > {user.name} </li>)}_39 </ul>_39 }_39 </div>_39 )_39}_39_39export default FetchAPI
W powyższym przykładzie sprawdziliśmy kod statusu odpowiedzi zamiast właściwości ok, jak to zrobiliśmy w pierwszym przykładzie. Tutaj sprawdziliśmy tylko status 200. W aplikacjach tzw. real-time może być konieczne sprawdzenie również kilku innych kodów statusu, takich jak 201, 404 lub 500 itp.
