Kontrola połączenia z danymi pliku json

Kontrola połączenia z danymi pliku json
D1
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 120
0

Próbuje napisac mechanizm czuwajacy nad poprawnym połaczeniem z plikiem json tak aby w przypadku bledu wyswietlał odpowiedni komunikat oraz informacje o statusi aby user nie zastanawiał sie czym jest np blad 404.

Można to zrobić za pomocą fetch, ale pytanie tylko czy zwykle połaczenie metodą GET będzie lepsze niżeli zastosowanie konstrukcji asynch/await ktora jak mniemam przydaje się do sterowania zadań.

Kopiuj
function testConnectionWithAwait(){

    const [info, setInfo] = useState([]);
    const [connectionState, setConnectionState] = useState(null);

    useEffect(() => {
        
        const getData = async () => {
            try{
                const dataObj = await fetch('https://jsonplaceholder.typicode.com/posts');
                if(dataObj.status == 404){
                    throw new Error(`Problem with file connection`);
                }
                
                const answer = await dataObj.json();
                setInfo(answer);
                connectionState("connected");
            }catch(er){
                setConnectionState(er.message);
                //setConnectionState(false); 
            }
            
        }
    },[]);

    if(!connectionState)
return <div>Connection error : {connectionState}</div>
Kopiuj
function testConnection(){

    const [info, setInfo] = useState([]);
    const [connectionState, setConnectionState] = useState(null);

    useEffect(() => {
        try{
            fetch('https://jsonplaceholder.typicode.com/user')
            .then(feedback => {
                if(feedback.status == 404){
                    //throw new Error(`Problem with file connection`);
                    console.log("Problem with file connection");
                   

                }
            })
            .then(response => response.json)
            setInfo(response);
            
        }catch(er){
            setConnectionState("false");
        }
    },[]);
}

Na bazie doświadczenia jesteś w stanie określić co jest lepsza drogą nie koniecznie bardziej popularną ? Marginesem mówią gdyby ktoś z Was nie miałby większego pojęcia o połączeniu tego typu , bo dawniej używało się httprequest to tak z tydzień roboczy zajęło by Wam poeksperymentowanie z tym , a moze jednak dłużej ? ;)

SL
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 1148
2

To jest to samo. Różnica jest taka, że w przypadku .fetch masz protezę na callback hell (sprawdź screenshot), która działa ale może być trudna do zrozumienia jak nie ogarniasz tego stylu programowania, gdzie await to rozwiązanie tego problemu, który upodabnia takie callbacki do normalnego sekwencyjnego kodu. Mechanizm ten sam, tylko await używa się przyjemniej i trudniej strzelić sobie w stopę co robisz:

Kopiuj
    })
            .then(response => response.json)
            setInfo(response);

Ten kod nie działa, jak już idziesz w callback hell to musisz pozostać w łańcuszku. W tym wypadku wołasz asynchroniczną funkcję, ale w żaden sposób nie czekasz na jej wynik

Pogadaj z jakimś LLM na ten temat

D1
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 120
0

Rozumiem to pytanie jaka jest przyczyna, że taki tok postępowania w przypadku kilku nieudanych prób nie daje żadnej reakcji

  1. Ustanowieniei stanu pobranych danych z pliku json (useState)
  2. Deklaracja stanu odnosnie statusu polaczenia
  3. Status informujacy o stanie polaczenia
  4. Zmienna licznikiem prob polaczena
  5. Utworzenie wywolywacza intrukcji useEffect
  6. Utworzenie obiektu zawierajacego konstrukcje async
    Cel => polaczenie z plikiem
  7. Wyjatek z obiektem przechowujacym wynik funkcji fetch + adres URL
  8. Przypisanie do obiektu wyniku funkcji setInterval z licznikiem 3s
  9. Jesli brak odpowiedzi adresu URL OK
  10. Wyswietlanie napisu + licznik prob
  11. Zwiekszenie licznika prob
  12. Jesli licznik prob = 2 then czysc interwal
  13. Informacja o bledzie throw new Error(...);
  14. Upewnienie pobranych danych typu json
    obj = await obj.json();
  15. Zmiana statusu polaczenia => true
  16. Zakoczennie wyjatku i zmiana status bledu polaczenia
  17. Jesli status bledu zwroci informacje then wracamy komunikat oraz
    status bledu

Wybacz, że tak algorytmicznie, ale zrozumieć miechanizm błędu, bo to samo robiłem na wyswietleniu napisu i liczniku i dawało radę. Mam nadzieje, że zrozumiałe.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.