Drugi parametr w fetch()

Kiedy próbujemy użyć fetch()funkcji w klasie, zwykle używamy jej do pobierania danych z API na stronie internetowej.

https://reqres.in/to witryna internetowa udostępniająca programistom interfejsy API do testowania ich kodu. Deweloperzy mogą testować różne metody HTTP i uzyskiwać prawdziwe odpowiedzi, ale fałszywe dane (REQRES, 2023). Będziemy używać tej witryny do wielokrotnego testowania naszego kodu.

Na przykład możemy uzyskać fałszywe dane, aby poznać nazwę użytkownikahttps://reqres.in/z fetch().

Jeśli klikniesz przycisk Test fetch() to Get data , fetch spróbuje pobrać dane z „https://reqres.in/api/users/2'metodą GET. Możesz zobaczyć, że „Janet” jest dołączona poniżej.

Jednak fetch może służyć nie tylko do pobierania danych. Ma drugi parametr, który pozwala dostosować to, co chcesz zrobić z funkcją pobierania.

Jest opcjonalny , więc możesz go całkowicie zignorować i nadal działa, aby uzyskać dane, tak jak robiliśmy to wcześniej.

Drugi parametr powinien być obiektem . Wewnątrz tego obiektu można umieścić wiele parametrów podrzędnych, w tym treść, nagłówek, metodę… (MDN, 2023).

Jest przykład:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Więc, jak go używamy?

W tym przykładzie, gdy użytkownik kliknie przycisk Post testowy, nasza aplikacja opublikuje nazwę użytkownika i stanowisko na serwerze. Poniżej pojawi się znacznik czasu informujący użytkowników o czasie utworzenia.

.catch((błąd) =>{})

Jak wszyscy wiemy, funkcja fetch() zwróci a Promise Object. Co jednak, jeśli serwer nie odpowiedział, a obietnica nie została spełniona?

Będzie błąd!

Musimy więc użyć catch((error) => {}), aby złapać błąd, aby uniknąć awarii.

Zobaczmy przykładowy kod.

W tym przykładzie „przypadkowo” otrzymałem niewłaściwy link. Tak więc obietnica nie zostanie spełniona i wystąpi błąd. Jeśli więc użytkownik kliknie przycisk Post testowy, konsola wyświetli komunikat „Błąd!!!”.

Więcej wykorzystania obiektu Response

Omówiliśmy sytuację, w której wystąpił błąd, a obiekt obietnicy nie został spełniony. Ale jeśli obiekt obietnicy zwrócony przez fetch()zostanie spełniony, zwróci obiekt Response .

Istnieje kilka właściwości instancji (MDN, 2023):

• Odpowiedź ok
• stan.odpowiedzi
• Response.statusText
• Adres URL odpowiedzi
• …

Użyłem Response.status, który zwraca kod stanu HTTP i Response.ok, który zwraca wartość logiczną , możemy zobaczyć, czy pobieranie się powiodło.

W tym przykładzie, jeśli użytkownicy klikną przycisk Post testowy, pojawi się kod stanu HTTP i wartość logiczna, aby sprawdzić, czy się powiodło.

Przerywanie pobierania

Użytkownicy mogą również przerwać pobieranie, używając metody AbortController Object.

Musimy utworzyć AbortController Objectosobno.

let controller = new AbortController();

Zatem naszym nowym drugim parametrem jest:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

Ustawiłem interwał, aby wykonać abort(). Więc kiedy najpierw kliknę przerwanie, a Post testowy zgłosi błąd AbortError w konsoli. Status i kod HTTP nie będą wyświetlane pod przyciskiem Post testowy, jak to robiliśmy wcześniej.

Odniesienie

MDN. (2023). Fetch() — interfejs sieciowy: MDN. Interfejsy API sieci Web | MDN. Pobrano 31 marca 2023 r. Zhttps://developer.mozilla.org/en-US/docs/Web/API/fetch

WYMAGANIA. (2023). Hostowany rest-API gotowy do odpowiedzi na Twoje żądania Ajax. Wymagane. Pobrano 31 marca 2023 r. Zhttps://reqres.in/

MDN. (2023). Odpowiedź — web apis: MDN. Interfejsy API sieci Web | MDN. Pobrano 31 marca 2023 r. Zhttps://developer.mozilla.org/en-US/docs/Web/API/Response

MDN. (2023). Kontroler przerwania — interfejs sieciowy: MDN. Interfejsy API sieci Web | MDN. Pobrano 31 marca 2023 r. Zhttps://developer.mozilla.org/en-US/docs/Web/API/AbortController