Jak obsłużyć nieudane wywołania API pobierania w JavaScript?

Tak więc w poprzednim poście widzieliśmy wszystkie możliwe rzeczy (z wyjątkiem obsługi błędów) za pomocą fetch(url, {options}). Jeśli jeszcze tego nie czytałeś, przeczytaj tutaj .

Dzisiaj dowiemy się, jak radzić sobie z błędami lub nieudanymi połączeniami wykonywanymi przez fetch(). Będziemy używać tego samego adresu URL, co w poprzednim poście. Bez zbędnych ceregieli przejdźmy od razu!

W poprzednim poście wspomniałem o punkcie:

Pobieranie zawsze się powiedzie lub otrzymuje odpowiedź, chyba że wystąpił jakiś błąd sieci.

Cóż, zawodzi również, jeśli składnia jest nieprawidłowa lub adres URL jest nieprawidłowy, co jest oczywistym przypadkiem. Zapamiętaj je jako punkt 1. Teraz zobaczmy składnię dla catch():

fetch("https://reqres.in/api/users/1")
.then( response => response.json() )
.then( data => console.log(data) )
.catch( error => console.log(error) )

Najpierw zobaczmy, co się dzieje, gdy uzyskujemy dostęp do danych użytkownika, który nie istnieje. O ile wiemy, powinniśmy odzyskać błąd „ 404 ” mówiący, że nie znaleziono, prawda?

fetch("https://reqres.in/api/users/34")  
.then(res=>res.json())
.then(data=>console.log(data))

      

fetch("https://reqres.in/api/users/34")  
.then(res=>res.json())
.then(data=>console.log(data))
.catch( error => console.log(error) )

      

Aby obsłużyć takie błędy, funkcja fetch udostępnia właściwość „ ok ” dla zwracanego obiektu odpowiedzi. Możemy wydrukować obiekt res, aby zobaczyć te szczegóły:

fetch("https://reqres.in/api/users/34")
.then(res=>console.log(res))

      

fetch("https://reqres.in/api/users/34")
.then((res)=>{ 
        if(res.ok) return res.json(); 
        else throw new Error("Status code error :" + res.status) 
})
.then(data=>console.log(data))
.catch(err=>console.log(err))

      

fetch("https://reqres.in/api/users/34")
.then((res)=>{ 
        if(res.ok) return res.json(); 
        else throw new Error("Status code error :" + res.status) 
})

      

catch()blok może obsłużyć błędy składni, ponieważ jeśli składnia jest nieprawidłowa:
pobieranie nie może się powieść → więc obietnica nie została zwrócona→ więc błąd idzie do przechwycenia
Tutaj składnia jest nieprawidłowa, więc catch pobiera błąd i wyświetla go:

fetch("https://reqres.in/api/users/34")
.then(res=>resjson())
.catch(error=>console.log(error))

      

fetch("https://reqres.in/api/users/4")
.then(res=>res.json())
.catch(err=>console.log(err))

      

fetch("https://reqres.in/api/users/34\")  
.then(res=>res.json())
.then(data=>console.log(data))
.catch(error=>console.log(error))

      

Mam nadzieję, że podobał Ci się artykuł. Jeśli tak, rozważ przekazanie opinii lub sugestii w sekcji komentarzy. Pamiętaj, aby śledzić, aby nie przegapić żadnego z moich przyszłych postów. Czekamy na więcej interesujących artykułów w przyszłości.

Jeśli będziesz za bardzo zadowolony, zawsze możesz postawić mi kawę

Możesz przeczytać kilka moich innych postów:

Odtwarzaj filmy z YouTube'a na VLC za pomocą jednego kliknięcia
Konwertuj plik „.py” na plik „.exe” za pomocą zaledwie dwóch poleceń
Zakodowałem skrypt, aby pobrać „zastrzeżone pobieranie” plików z Dysku Google

Jeśli masz dalsze wątpliwości, możesz zadzwonić do mnie na [email protected] LUB znaleźć mnie na Twitterze .

Więcej treści na plainenglish.io