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

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:

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?

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:

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);
    });
}

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

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);
    });
}

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

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:

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:

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")}

Dlaczego nie async/await opakowane w try/catch?

To jakieś akademickie ćwiczenie promis?

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.

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

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

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

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

natomiast ty zrobiłeś coś takiego

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

.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.

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.

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:

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:

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:

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

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

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);
  }
}

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.

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ę?

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.

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

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

// 

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