NAČÍTAŤ API V JAVASCRIPTE S PRÍKLADMI

JavaScript fetch()> metóda používaná na získavanie zdrojov zo servera. Vracia Promise, riešiaci objekt Response, ktorý zapuzdruje odpoveď servera na požiadavku. fetch()> uľahčuje vytváranie požiadaviek GET, ktoré sa zvyčajne používajú na získavanie údajov, a POST požiadavky, používané na odosielanie údajov na servery.

ďalej fetch()> bezproblémovo integruje pokročilé HTTP funkcie ako napr Zdieľanie zdrojov medzi zdrojmi (CORS) a ďalšie rozšírenia, ktoré obohacujú skúsenosti s vývojom webu o vylepšené zabezpečenie a interoperabilitu.

Poznámka: Fetch API prichádza s metódou fetch(), ktorá sa používa na načítanie údajov z rôznych zdrojov.

Syntax:

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

Parametre:

URL: Adresa URL, na ktorú sa má odoslať žiadosť.
Možnosti: Je to súbor vlastností. Je to voliteľné parameter. Dostupné možnosti sú:
- metóda: Určuje metódu HTTP pre požiadavku. (môže byť GET, POST, PUT alebo DELETE)
- Hlavičky
- Telo: Údaje, ktoré sa majú odoslať so žiadosťou.
- režim: Určuje režim požiadavky (napr. kori, nocors, rovnaký pôvod atď.)
- Poverenia : Určuje, či sa majú s požiadavkou odoslať poverenia používateľa (súbory cookie, overovacie hlavičky atď.)

Príklady metódy JavaScript fetch()

Pozrime sa na niektoré príklady metódy načítania. Tieto príklady vám poskytnú úplné pochopenie metódy načítania v jazyku JavaScript.

1 . Získajte požiadavku pomocou funkcie Fetch

Tento príklad ukazuje, ako vytvoriť požiadavku na získanie v metóde načítania.

Poznámka: Bez možností bude funkcia Fetch vždy fungovať ako žiadosť o získanie.

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

Výkon:

Vysvetlenie:

Funkcia JS fetch() sa používa na odoslanie požiadavky GET na adresu URL https://jsonplaceholder.typicode.com/todos/1. Táto funkcia vráti Promise, ktorý sa vyhodnotí ako objekt Response reprezentujúci odpoveď na požiadavku.
Metóda then() je pripojená k volaniu fetch() na spracovanie odpovede asynchrónne. Vo vnútri funkcie spätného volania odovzdanej potom() sa zavolá metóda res.json() na analýzu tela odpovede ako JSON. Táto metóda tiež vráti Promise, ktorý rieši analyzované údaje JSON.
Ďalšia metóda then() je zreťazená na spracovanie analyzovaných údajov JSON. V rámci funkcie spätného volania sa analyzované údaje JSON d prihlásia do konzoly pomocou console.log()

2 . Použitie načítania na uverejnenie údajov JSON

V tomto príklade sme nahrali údaje JSON pomocou rozhrania fetch() API v jazyku JavaScript. Telo požiadavky môžete nastaviť na verziu svojich údajov s reťazcami JSON a nastaviť príslušné hlavičky na označenie, že odosielate JSON.

Žiadosti o príspevok je možné zadať pomocou funkcie načítania zadaním nasledujúcich možností:

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

Po skontrolovaní syntaxe žiadosti o príspevok sa pozrite na príklad nižšie, ktorý demonštruje použitie žiadosti o príspevok v metóde načítania.

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 =>{ // Skontrolujte, či bola požiadavka úspešná if (!response.ok) { throw new Error('Sieťová odpoveď nebola v poriadku');  } // Analyzujte odpoveď ako JSON return response.json();  }) .then(data => { // Spracovanie údajov JSON console.log(data); }) .catch(error => { // Spracovanie všetkých chýb, ktoré sa vyskytli počas načítania console.error('Chyba načítania: ', chyba);  });

Vysvetlenie:

Definujeme vaše údaje JSON.
Nastavili sme možnosti pre žiadosť o načítanie vrátane metódy nastavenej na „POST“, hlavičky Content-Type nastavenej na hodnotu „application/json“ a tela nastaveného na verziu vašich údajov v JSON.
Požiadavku na prevzatie vykonáme s poskytnutými možnosťami pomocou funkcie fetch().
Zvyšok kódu zostáva rovnaký ako predtým, spracováva odpoveď a všetky chyby, ktoré sa vyskytnú počas načítania.

3. Zrušenie požiadavky na načítanie

Môžete použiť AbortController a Rozhranie AbortSignal na prerušenie požiadavky na načítanie v JavaScripte.

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(() =>{ controller.abort(); // Zrušenie požiadavky na vyzdvihnutie console.log('Vypršal časový limit požiadavky na načítanie'); }, 5000); // Spracovanie požiadavky fetch fetchPromise .then(response => { // Skontrolujte, či bola požiadavka úspešná, ak (!response.ok) { throw new Error('Sieťová odpoveď nebola v poriadku'); } // Analyzujte odpoveď ako JSON return response.json( }) .then(data => { // Spracovanie údajov JSON console.log(data); }) .catch(error => { // Spracovanie všetkých chýb, ktoré sa vyskytli počas fetch console.error('Chyba načítania:', chyba }) .finally(() => { clearTimeout(timeoutId); // Vymazanie časového limitu });

Vysvetlenie:

Vytvoríme novú inštanciu AbortController a získame jej signál.
Požiadavku na načítanie vykonáme pomocou funkcie fetch() s poskytnutými možnosťami.
Pomocou setTimeout() sme nastavili časový limit 5 sekúnd, aby sme prerušili požiadavku na načítanie, ak to trvá príliš dlho.
V rámci spätného volania časového limitu zavoláme controller.abort(), aby sme zrušili požiadavku na vyzdvihnutie.
Žiadosť o načítanie spracovávame ako zvyčajne, vrátane analýzy odpovede a spracovania akýchkoľvek chýb.
Nakoniec v bloku konečne() vymažeme časový limit pomocou funkcie clearTimeout(), aby sme zabránili spusteniu časového limitu, ak sa požiadavka na vyzdvihnutie dokončí pred uplynutím časového limitu.

Odoslanie žiadosti vrátane poverení

Na odoslanie žiadosti vrátane prihlasovacích údajov, ako napr cookies , v žiadosti o načítanie môžete nastaviť vlastnosť poverení tak, aby zahŕňala.

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

Ak chcete odoslať poverenia iba v prípade, že adresa URL požiadavky je v rovnakom pôvode ako volajúci skript, pridajte poverenia: „rovnaký pôvod“.

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

Príklady použitia metódy JavaScript fetch()

Tu sú niektoré z prípadov použitia metódy načítania. Toto sú bežné problémy, s ktorými sa začínajúci vývojári stretávajú pri práci s načítaním.

1. Ako používať JavaScript Fetch API na získanie údajov

Požiadavka JavaScript Get sa používa na získanie údajov zo servera. Ak chcete použiť rozhranie Fetch API v jazyku JavaScript na získanie údajov zo servera, môžete odoslať požiadavku GET na požadovanú adresu URL a spracovať odpoveď.

2. Get and Post metóda pomocou Fetch API

Metódu fetch() možno použiť s akýmkoľvek typom požiadavky, ako napr POST , GET , PUT, a VYMAZAŤ , Metóda GET používa rozhranie fetch API

3. Rozdiel medzi Fetch a Axios pre vytváranie http požiadaviek

Axios je samostatný balík tretej strany, ktorý sa dá jednoducho nainštalovať a Fetch je zabudovaný do väčšiny moderných prehliadačov; ako taká nie je potrebná žiadna inštalácia.

Podporované prehliadače:

JavaScript Fetch je ECMAScript6 (ES6) a je podporovaná takmer všetkými modernými prehliadačmi, ako sú: