Obsługa błędów z połączeniem żądań HTTP z fetch()

rafal95p

2023-03-31 12:00

~~rafal95p~~2023-03-31 12:00

Rejestracja:około 2 lata
Ostatnio:prawie 2 lata
Postów:157

Próbuję opracować w miarę uniwersalną funkcję, która za pomocą fetch odczyta pewne dane i przekaże je dalej. Natomiast gdy będzie problem (brak połączenia z serwerem lub zasób pod podanym URL nie jest dostępny), chcę o tym wiedzieć.

Wzorując się na przykładach z sieci wykombinowałem coś takiego:

Kopiuj

function getData() {
    const URL = '...';
    const options = {};
    
    fetch (URL, options)
    .then((response) => {
      if (response.ok) {
        return response;
      } 
      else {
        throw new Error("Błąd:" + response.status);
      }})
    .then((response) => response.json())
    .then((data) => doSomethingWithData(data))
    .catch(error => {
      dispalyErrorOnUI(error);
    });
}

Co to tym sądzicie? Czy jest to w miarę uniwersalne i obsłuży większość błędów? Można coś uprościć składniowo?

edytowany 1x, ostatnio: Riddle 2023-04-02 10:49

Gouda105

2023-03-31 12:32

Gouda1052023-03-31 12:32

Rejestracja:ponad 7 lat
Ostatnio:26 dni
Postów:487

Chyba nie ma się do czego przyczepić. Ewentualnie brak parametrów funkcji. Skoro ma być uniwersalna to powinieneś przekazać URL, options, jakiś callback i ewentualnie funkcję do wykonania kiedy wystąpi błąd.
Wtedy kod wyglądałby tak:

Kopiuj

function getData(URL, options, success, failure) {
    fetch (URL, options)
    .then((response) => {
      if (response.ok) {
        return response;
      } 
      else {
        throw new Error("Błąd:" + response.status);
      }})
    .then((response) => response.json())
    .then((data) => success(data))
    .catch(error => {
      failure(error);
    });
}

rafal95p

2023-03-31 12:39

~~rafal95p~~2023-03-31 12:39

Rejestracja:około 2 lata
Ostatnio:prawie 2 lata
Postów:157

Początkowo chciałem tak to zrobić, ale nie zadziałało. Domyślam się, że musi być return w if:

Kopiuj

function getData(URL, options, success, failure) {
    fetch (URL, options)
    .then((response) => {
      if (!response.ok) {
        throw new Error("Błąd:" + response.status);
      }})
    .then((response) => response.json())
    .then((data) => success(data))
    .catch(error => {
      failure(error);
    });
}

edytowany 1x, ostatnio: ~~rafal95p~~ 2023-03-31 12:39

Gouda105

2023-03-31 13:01

Gouda1052023-03-31 13:01

Rejestracja:ponad 7 lat
Ostatnio:26 dni
Postów:487

Nie no tamten kod jest dobry. Nie wiem o co Ci chodzi z tym return w if.

Wklej sobie ten kod w konsolę przeglądarki

Kopiuj

function getData(URL, options, success, failure) {
    fetch (URL, options)
    .then((response) => {
      if (response.ok) {
        return response;
      } 
      else {
        throw new Error("Błąd:" + response.status);
      }})
    .then((response) => response.json())
    .then((data) => success(data))
    .catch(error => {
      failure(error);
    });
}

Następnie sprawdź go na przykładzie, istniejącego API:

Kopiuj

getData("https://api.chucknorris.io/jokes/random", {}, (res)=>{console.log(res)}, ()=>{console.log("Error")})

i zwraca nam pomyślną odpowiedź.

Teraz sprawdźmy na przykładzie niedziałającego API, gdzie trzeba obsłużyć błąd:

Kopiuj

getData("https://api.chucknorris.io/blad/random", {}, (res)=>{console.log(res)}, ()=>{console.log("Error")})

no i tak, jak oczekiwaliśmy wyświetla się w konsoli błąd

GET https://api.chucknorris.io/blad/random 404

oraz wiadomość "Error", o której pokazanie prosiliśmy wywołując funkcję w 4-tym parametrze (failure) - ()=>{console.log("Error")}

edytowany 4x, ostatnio: Gouda105 2023-03-31 13:02

Wiktor Zychla

2023-03-31 14:42

Wiktor Zychla2023-03-31 14:42

Rejestracja:około 7 lat
Ostatnio:około 7 godzin
Postów:77

Dlaczego nie async/await opakowane w try/catch?

To jakieś akademickie ćwiczenie promis?

rafal95p

2023-03-31 17:47

~~rafal95p~~2023-03-31 17:47

Rejestracja:około 2 lata
Ostatnio:prawie 2 lata
Postów:157

Dlaczego nie async/await opakowane w try/catch?

Z tego co wyczytałem, to fetchem prościej ogarnia się obsługę błędów. Ponadto async/await - tak wyczytałem przynajmniej - pasuje w apkach, gdzie asynchroniczność jest wskazana. A tymczasem tutaj fetch będzie podpięty pod przycisk.

To jakieś akademickie ćwiczenie promis?

Projekt na potrzeby własne.

LukeJL

2023-03-31 17:57

LukeJL2023-03-31 17:57

Rejestracja:około 11 lat
Ostatnio:26 minut
Postów:8421

masz albo buga albo piszesz nieidiomatyczny kod. Idiomatyczny kod byłby taki, że funkcja getData zwraca obiekt promise:

Kopiuj

function getData() {
   return Promise.resolve('foo');
}

i używałoby się tego kodu tak:

Kopiuj

getData().then(....);
// albo
await getData();

natomiast ty zrobiłeś coś takiego

Kopiuj

function getData() {
   Promise.resolve('foo').then(doSomething);
}

(zamiast fetch itp. dałem Promise.resolve('foo') dla uproszczenia sytuacji).

czyli nie dałeś return, czyli funkcja zwróci undefined zamiast obiektu promise, co najwyżej sobie coś t

pytanie tylko, czy to jest twój błąd, czy może sposób pisania.

bo jeśli odpalisz doSomethingWithData

Kopiuj

.then((data) => doSomethingWithData(data))

to może osiągniesz co chcesz. Tylko w zasadzie cofnąłeś się w paradygmacie z promisów do callbacków. Promisy polegają na tym, że to taka przyszła wartość, którą można przekazywać albo mapować przez .then, więc jeśli robisz utilsową funkcję getData to idiomatycznie powinna zwrócić ona promise, a nie sama odpalać doSomethingWithData.

Gouda105 napisał(a):

Chyba nie ma się do czego przyczepić. Ewentualnie brak parametrów funkcji. Skoro ma być uniwersalna to powinieneś przekazać URL, options, jakiś callback i ewentualnie funkcję do wykonania kiedy wystąpi błąd.

No ale po co, skoro to cofanie się z promisów do callbacków. Właśnie po to są promisy, żeby iść dalej z abstrakcją. Tak samo async/await są po to, żeby nie musieć używać .then bezpośrednio.

Chyba, że się nie da. Bo niestety async/await jest wygodne, ale nie obsługuje wszystkich opcji (bo niepotrzebnie zatrzymują działanie funkcji), dlatego czasem trzeba wracać do .then (plus w przypadku fetch i mapowania fetch(...).then(r => r.json()) IMO całkiem wygodnie się to robi na .then). Tak samo promisy nie są tak elastyczne jak callbacki (promise tylko raz się rozwiąże, a callback można wywoływać wiele razy), więc do callbacków też czasem trzeba wrócić. Tylko, że tutaj to nie ma sensu za bardzo.

edytowany 10x, ostatnio: LukeJL 2023-03-31 18:15

rafal95p

2023-03-31 18:17

~~rafal95p~~2023-03-31 18:17

Rejestracja:około 2 lata
Ostatnio:prawie 2 lata
Postów:157

W mojej aplikacji chodzi o to, by wyświetlać pewne dane na podstawie informacji zawartych w pliku JSON wystawionym na API.
Odświeżanie ma następować wtedy tylko wtedy, gdy nacisnę przycisk. I pod ten przycisk chciałem podpiąć getData().
Pytanie więc czy aync/await są tu potrzebne. Nie dostrzegam asynchroniczności. Albo dane się załadują, albo nie. A jak nie, to na podstawie błędu będzie to ustalane.

edytowany 1x, ostatnio: ~~rafal95p~~ 2023-03-31 18:20

LukeJL

2023-03-31 18:32

LukeJL2023-03-31 18:32

Rejestracja:około 11 lat
Ostatnio:26 minut
Postów:8421

rafal95p napisał(a):

Nie dostrzegam asynchroniczności.

A wiesz, że samo fetch jest już asynchroniczne?

Albo dane się załadują, albo nie. A jak nie, to na podstawie błędu będzie to ustalane.

Dane przecież się załadują tak czy siak asynchronicznie. Promisy (w tym ich metoda .then) właśnie służą do obsługi asynchroniczności.

Async/await to tylko cukier składniowy na promisy.

A sama asynchroniczność nie polega na używaniu async/await, tylko na tym, że kod się nie odpali od razu, tylko wpadnie w pętle eventów:

obscurity

2023-03-31 18:33

obscurity2023-03-31 18:33

Rejestracja:około 6 lat
Ostatnio:dzień

rafal95p napisał(a):

Nie dostrzegam asynchroniczności.

Dane ładują się asynchronicznie

Pytanie więc czy aync/await są tu potrzebne

Nic nie jest potrzebne, można pisać programy na goto w pascalu jak się chce.
Ale ten kod:

Kopiuj

fetch (URL, options)
.then((response) => {
  if (response.ok) {
    return response;
  } 
  else {
    throw new Error("Błąd:" + response.status);
  }})
.then((response) => response.json())
.then((data) => doSomethingWithData(data))
.catch(error => {
  dispalyErrorOnUI(error);
});

Mógłby wyglądać tak:

Kopiuj

try {
  const reponse = await fetch (URL, options);
  if (!response.ok) {
    throw new Error("Błąd:" + response.status);
  }
  const data = await response.json();
  doSomethingWithData(data);
} catch (error) {
  dispalyErrorOnUI(error);
}

Kwestia gustu

edytowany 1x, ostatnio: obscurity 2023-03-31 18:35

~~rafal95p~~ 2023-03-31 18:35

Kwestia gustu Oraz doświadczenia :)

rafal95p

2023-04-02 10:42

~~rafal95p~~2023-04-02 10:42

Rejestracja:około 2 lata
Ostatnio:prawie 2 lata
Postów:157

Reasumując, czy to jest ok pod kątem idiomatyczności?

Kopiuj

async getData(URL, options, success, fail) {
  try {
    const reponse = await fetch (URL, options);
    if (!response.ok) {
      throw new Error("Błąd:" + response.status);
    }
    const data = await response.json();
    success(data);
  } 
  catch (error) {
    fail(error);
  }
}

~~rafal95p~~ 2023-04-02 14:50

https://fsgeek.pl/post/asynchronicznosc-w-javascript/

Wiktor Zychla

2023-04-02 11:59

Wiktor Zychla2023-04-02 11:59

Rejestracja:około 7 lat
Ostatnio:około 7 godzin
Postów:77

Nie ma potrzeby żeby funkcja przyjmowała callbacki. Niech zwraca wynik przez return albo przerzuca wyjątek.

W tej postaci, z callbackami, jest niewygodna dla wołającego, bo trzeba wołać z await ale podrzucać callbacki.

Jeśli już miałoby to tak zostać to bezpiecznej byłoby przed success i fail dać await żeby obsłużyć funkcje które też są asynchroniczne.

rafal95p

2023-04-03 07:45

~~rafal95p~~2023-04-03 07:45

Rejestracja:około 2 lata
Ostatnio:prawie 2 lata
Postów:157

Wiktor Zychla napisał(a):

Jeśli już miałoby to tak zostać to bezpiecznej byłoby przed success i fail dać await żeby obsłużyć funkcje które też są asynchroniczne.

Masz na myśli argumenty funkcji, czy linie 8 i 11? Jeżeli to drugie, to czegoś nie rozumiem. Linia 8 lub 11 w teorii powinna wykonać się wtedy, gdy obietnica zostanie zwrócona. Bez tego kod jest "zamrożony". Dobrze myślę?

edytowany 1x, ostatnio: ~~rafal95p~~ 2023-04-03 08:25

Xarviel

2023-04-03 08:18

Xarviel2023-04-03 08:18

Rejestracja:ponad 3 lata
Ostatnio:2 dni
Postów:847

Jeśli zależy nam jedynie na przekazaniu danych dalej bez żadnych modyfikacji to nie potrzebujemy try / catch, więc możemy zlikwidować parametry success, oraz fail.

Kopiuj

async getData(URL, options) {
  const reponse = await fetch (URL, options);

  if (!response.ok) {
    throw new Error(`Błąd: ${response.status}`);
  }

  return await response.json();
}

i korzystać z tego w taki sposób

Kopiuj

try {
  const data = await getData('', {});
  
  // success
} catch (error) {
  // fail
}

// 

getData('', {})
  .then(() => {}) // success
  .catch(() => {}) // fail

edytowany 1x, ostatnio: Xarviel 2023-04-03 08:24

Liczba odpowiedzi na stronę

Treść *

Treść

Podgląd

Kliknij, aby dodać treść...

Kliknij, aby dodać załącznik lub wklej ze schowka.

Instrukcja obsługi Markdown

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj underline.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, , , <kbd>, <del>, , <dfn>, <pre>, <blockquote>, <hr/>, ,  oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H2O i m2 otrzymasz: H₂O i m².

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript document.write('Hello World'); ```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

Alt+L - zaznaczenie całej linii
Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

Ctrl+Enter - dodaj post
⌘+Enter - dodaj post (MacOS)

Obsługa błędów z połączeniem żądań HTTP z fetch()

rafal95p

rafal95p

rafal95p

Gouda105 napisał(a):

rafal95p

rafal95p napisał(a):

rafal95p napisał(a):

rafal95p

rafal95p

Wiktor Zychla napisał(a):

Smileys & People

Animals & Nature

Food & Drink

Travel & Places

Activities

Objects

Symbols

Typografia

Linki

Wewnętrzne odnośniki

Wspomnienia użytkowników

Znaczniki HTML

Skróty klawiszowe

Indeks górny oraz dolny

Składnia Tex

Kod źródłowy

Krótkie fragmenty kodu

Kod wielolinijkowy

Tabelki

Lista uporządkowana i nieuporządkowana

Składnia Markdown

Skróty klawiszowe