POBIERZ API W JAVASCRIPT Z PRZYKŁADAMI

JavaScript fetch()> metoda używana do pobierania zasobów z serwera. Zwraca obietnicę, kierując się do obiektu Response, który zawiera odpowiedź serwera na żądanie. fetch()> ułatwia wykonywanie zarówno żądań GET, zwykle używanych do pobierania danych, jak i POST żądania, wykorzystywane do wysyłania danych na serwery.

Ponadto, fetch()> płynnie integruje zaawansowane HTTP funkcjonalności takie jak Udostępnianie zasobów między źródłami (CORS) i inne rozszerzenia, wzbogacające doświadczenie tworzenia stron internetowych o zwiększone bezpieczeństwo i interoperacyjność.

Uwaga: Fetch API zawiera metodę fetch(), która służy do pobierania danych z różnych źródeł.

Składnia:

fetch('url') // api for the get request .then(response =>odpowiedź.json()) .then(data => console.log(data));

Parametry:

Adres URL: Adres URL, na który ma zostać wysłane żądanie.
Opcje: Jest to szereg właściwości. To jest opcjonalny parametr. Dostępne opcje to:
- Metoda: Określa metodę HTTP dla żądania. (może to być GET, POST, PUT lub DELETE)
- Nagłówki
- Ciało: Dane, które należy przesłać wraz z zapytaniem.
- Tryb: Określa tryb żądania (np. kors, nocory, tego samego pochodzenia itp.)
- Referencje : Określa, czy wraz z żądaniem mają być wysyłane dane uwierzytelniające użytkownika (pliki cookie, nagłówki uwierzytelniające itp.).

Przykłady metod JavaScript fech().

Przyjrzyjmy się niektórym przykładom metody fetch. Te przykłady zapewniają pełne zrozumienie metody fetch w JavaScript.

1 . Uzyskaj żądanie za pomocą polecenia Fetch

Ten przykład pokazuje, jak wykonać żądanie Get w metodzie pobierania.

Notatka: Bez opcji Fetch zawsze będzie działać jako żądanie pobrania.

JavaScript

  // API for get requests let fetchRes = fetch( 'https://jsonplaceholder.typicode.com/todos/1');   // FetchRes is the promise to resolve // it by using.then() method fetchRes.then(res =>res.json()).then(d => { console.log(d) })

Wyjście:

Wyjaśnienie:

Funkcja JS fetch() służy do wysyłania żądania GET na adres URL https://jsonplaceholder.typicode.com/todos/1. Ta funkcja zwraca obietnicę, która przekształca się w obiekt Response reprezentujący odpowiedź na żądanie.
Metoda then() jest połączona z wywołaniem fetch() w celu asynchronicznej obsługi odpowiedzi. Wewnątrz funkcji wywołania zwrotnego przekazanej do then() wywoływana jest metoda res.json() w celu przeanalizowania treści odpowiedzi w formacie JSON. Ta metoda zwraca również obietnicę, która jest rozpoznawana na przeanalizowanych danych JSON.
Inna metoda then() jest połączona łańcuchowo w celu obsługi przeanalizowanych danych JSON. Wewnątrz funkcji wywołania zwrotnego przeanalizowane dane JSON d są rejestrowane na konsoli za pomocą console.log()

2 . Używanie pobierania do wysyłania danych JSON

W tym przykładzie przesłaliśmy dane JSON za pomocą interfejsu API fetch() w JavaScript. Możesz ustawić treść żądania na wersję swoich danych ze stringami JSON i ustawić odpowiednie nagłówki wskazujące, że wysyłasz JSON.

Żądania opublikowania można wysyłać za pomocą funkcji pobierania, podając opcje podane poniżej:

let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }

Po sprawdzeniu składni żądania pocztowego spójrz na poniższy przykład, który demonstruje użycie żądania pocztowego w metodzie pobierania.

JavaScript

  // Your JSON data const jsonData = { key1: 'value1', key2: 'value2' }; // Set up options for the fetch request const options = {  method: 'POST',  headers: {  'Content-Type': 'application/json' // Set content type to JSON  },  body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body }; // Make the fetch request with the provided options fetch('https://api.example.com/upload', options)  .then(response =>{ // Sprawdź, czy żądanie się powiodło if (!response.ok) { rzucaj nowy błąd('Odpowiedź sieci nie była prawidłowa');  } // Przeanalizuj odpowiedź jako JSON return respond.json();  }) .then(data => { // Obsługuj dane JSON console.log(data); }) .catch(error => { // Obsługuj wszelkie błędy, które wystąpiły podczas pobierania console.error('Błąd pobierania: ', błąd);  });

Wyjaśnienie:

Definiujemy Twoje dane JSON.
Konfigurujemy opcje żądania pobrania, w tym metodę ustawioną na „POST”, nagłówek Content-Type ustawiony na „application/json” i treść ustawioną na skróconą wersję danych JSON.
Żądanie pobrania wykonujemy z udostępnionymi opcjami za pomocą funkcji fetch().
Reszta kodu pozostaje taka sama jak poprzednio, obsługując odpowiedź i wszelkie błędy, które wystąpią podczas pobierania.

3. Przerywanie żądania pobrania

Możesz skorzystać z Przerwij kontroler I Interfejs przerwania sygnału aby przerwać żądanie pobrania w JavaScript.

JavaScript

  // Create a new AbortController instance const controller = new AbortController(); const signal = controller.signal; // Make the fetch request with the signal const fetchPromise = fetch('https://api.example.com/data', { signal }); // Timeout after 5 seconds const timeoutId = setTimeout(() =>{ kontroler.przerwanie(); // Przerwij żądanie pobrania console.log('Przekroczono limit czasu żądania pobrania'); }, 5000); // Obsłuż żądanie pobrania fetchPromise .then(response => { // Sprawdź, czy żądanie się powiodło if (!response.ok) { rzucaj nowy błąd('Odpowiedź sieciowa nie była w porządku'); } // Przeanalizuj odpowiedź jako JSON return respond.json(); }) .then(data => { // Obsługa danych JSON console.log(data); }) .catch(error => { // Obsługa wszelkich błędów, które wystąpiły podczas fetch console.error('Błąd pobierania:', błąd }) .finally(() => { clearTimeout(timeoutId); // Usuń limit czasu });

Wyjaśnienie:

Tworzymy nową instancję AbortController i pozyskujemy jej sygnał.
Żądanie pobrania wykonujemy za pomocą metody fetch() z podanymi opcjami.
Ustawiamy limit czasu na 5 sekund za pomocą metody setTimeout(), aby przerwać żądanie pobrania, jeśli trwa ono zbyt długo.
Wewnątrz wywołania zwrotnego limitu czasu wywołujemy kontroler.abort(), aby przerwać żądanie pobrania.
Obsługujemy żądanie pobrania w zwykły sposób, włączając w to analizowanie odpowiedzi i obsługę wszelkich błędów.
Na koniec w bloku final() kasujemy limit czasu za pomocą metody clearTimeout(), aby zapobiec uruchomieniu limitu czasu, jeśli żądanie pobrania zakończy się przed upływem limitu czasu.

Wysyłanie żądania zawierającego dane uwierzytelniające

Aby wysłać żądanie zawierające dane uwierzytelniające, takie jak ciasteczka w żądaniu pobrania możesz ustawić właściwość poświadczeń tak, aby zawierała dane uwierzytelniające.

fetch('https://example.com', { credentials: 'include', });

Jeśli chcesz wysłać dane uwierzytelniające tylko wtedy, gdy adres URL żądania znajduje się w tym samym źródle, co skrypt wywołujący, dodaj dane uwierzytelniające: „same-origin”.

// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });

Przypadki użycia metody JavaScript fech().

Oto niektóre przypadki użycia metody fetch. Są to typowe problemy, z którymi spotykają się początkujący programiści podczas pracy z pobieraniem.

1. Jak używać interfejsu API JavaScript Fetch do pobierania danych

Żądanie JavaScript Get służy do pobierania danych z serwera. Aby użyć interfejsu Fetch API w JavaScript do pobrania danych z serwera, możesz wysłać żądanie GET do żądanego adresu URL i obsłużyć odpowiedź.

2. Metoda Get i Post przy użyciu Fetch API

Metodę fetch() można zastosować w przypadku dowolnego typu żądania, np POST , DOSTAWAĆ , UMIEŚCIĆ, I USUWAĆ , Metoda GET korzysta z interfejsu API pobierania

3. Różnica między Fetch i Axios w zakresie tworzenia żądań http

Axios to samodzielny pakiet innej firmy, który można łatwo zainstalować, a Fetch jest wbudowany w większość nowoczesnych przeglądarek; nie jest wymagana żadna instalacja jako taka.

Obsługiwane przeglądarki:

Pobieranie JavaScript to ECMAScript6 (ES6) funkcja i jest obsługiwana przez prawie wszystkie nowoczesne przeglądarki, takie jak: