JavaScriptfetch()>metoda používaná pro získávání zdrojů ze serveru. Vrací Promise, řešící objekt Response, který zapouzdřuje odpověď serveru na požadavek.fetch()>usnadňuje vytváření požadavků GET, které se obvykle používají pro načítání dat, a POŠTA požadavky, používané pro odesílání dat na servery.
dále fetch()> hladce integruje pokročilé HTTP funkce jako např Cross-Origin Resource Sharing (CORS) a další rozšíření, která obohacují vývoj webu o vylepšené zabezpečení a interoperabilitu.
Poznámka: Fetch API přichází s metodou fetch(), která se používá k načítání dat z různých zdrojů.
Syntax:
nastavit oddělovač java
fetch('url') // api for the get request .then(response =>response.json()) .then(data => console.log(data));>Parametry:
- URL: Adresa URL, na kterou má být žádost podána.
- Možnosti: Je to řada vlastností. Je to an volitelný parametr. Dostupné možnosti jsou:
- Metoda: Určuje metodu HTTP pro požadavek. (může být GET, POST, PUT nebo DELETE)
- Záhlaví
- Tělo: Údaje, které mají být zaslány s žádostí.
- režim: Určuje režim požadavku (např. kori, nocors, stejný původ atd.)
- Pověření : Určuje, zda se mají s požadavkem odeslat přihlašovací údaje uživatele (soubory cookie, autentizační hlavičky atd.)
Příklady metody JavaScript fetch()
Podívejme se na některé příklady metody načítání. Tyto příklady vám poskytnou úplné pochopení metody načítání v JavaScriptu.
1 . Získejte požadavek pomocí funkce Načíst
Tento příklad ukazuje, jak vytvořit požadavek Get v metodě načtení.
Poznámka: Bez možností bude Fetch vždy fungovat jako požadavek na získání.
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ýstup:
Vysvětlení:
- Funkce JS fetch() se používá k odeslání požadavku GET na adresu URL https://jsonplaceholder.typicode.com/todos/1. Tato funkce vrací Promise, který se převede na objekt Response představující odpověď na požadavek.
- Metoda then() je zřetězena s voláním fetch(), aby zpracovala odpověď asynchronně. Uvnitř funkce zpětného volání předané potom() je zavolána metoda res.json() k analýze těla odpovědi jako JSON. Tato metoda také vrátí Promise, který se převede na analyzovaná data JSON.
- Další metoda then() je zřetězená pro zpracování analyzovaných dat JSON. V rámci funkce zpětného volání jsou analyzovaná data JSON d protokolována do konzole pomocí console.log()
2 . Použití načtení k publikování dat JSON
V tomto příkladu jsme nahráli data JSON pomocí rozhraní fetch() API v JavaScriptu. Můžete nastavit tělo požadavku na verzi vašich dat ve formátu JSON a nastavit příslušná záhlaví, která označují, že odesíláte JSON.
Požadavky na příspěvek lze provést pomocí načtení zadáním níže uvedených možností:
let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }>Po kontrole syntaxe požadavku na odeslání se podívejte na níže uvedený příklad, který ukazuje použití požadavku na odeslání v metodě načítání.
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 =>{ // Zkontrolujte, zda byl požadavek úspěšný if (!response.ok) { throw new Error('Síťová odpověď nebyla v pořádku'); } // Analyzujte odpověď jako JSON return response.json(); }) .then(data => { // Zpracování dat JSON console.log(data); }) .catch(error => { // Zpracování všech chyb, ke kterým došlo během načítání console.error('Chyba načítání: ', chyba });> Vysvětlení:
- Definujeme vaše data JSON.
- Nastavili jsme možnosti pro požadavek načtení, včetně metody nastavené na ‚POST‘, záhlaví Content-Type nastavené na ‚application/json‘ a tělo nastavené na verzi vašich dat ve formátu JSON.
- Požadavek na načtení provedeme s poskytnutými možnostmi pomocí funkce fetch().
- Zbytek kódu zůstává stejný jako předtím, zpracovává odpověď a všechny chyby, které se vyskytnou během načítání.
3. Zrušení požadavku na načtení
Můžete použít AbortController a Rozhraní AbortSignal pro zrušení požadavku na načtení v JavaScriptu.
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šení požadavku na načtení console.log('Vypršel časový limit požadavku na načtení'); }, 5000); // Zpracování požadavku na načtení fetchPromise .then(response => { // Zkontrolujte, zda byl požadavek úspěšný, pokud (!response.ok) { throw new Error('Síťová odpověď nebyla v pořádku'); } // Analyzujte odpověď jako JSON return response.json( }) .then(data => { // Zpracování dat JSON console.log(data); }) .catch(error => { // Zpracování všech chyb, ke kterým došlo během fetch console.error('Chyba načítání:', chyba }) .finally(() => { clearTimeout(timeoutId); // Vymazání časového limitu });> Vysvětlení:
- Vytvoříme novou instanci AbortController a získáme její signál.
- Požadavek na načtení provedeme pomocí fetch() s poskytnutými možnostmi.
- Pomocí setTimeout() jsme nastavili časový limit 5 sekund, abychom přerušili požadavek na načtení, pokud trvá příliš dlouho.
- Uvnitř zpětného volání časového limitu zavoláme controller.abort() k přerušení požadavku na načtení.
- Požadavek na načtení zpracováváme jako obvykle, včetně analýzy odpovědi a zpracování případných chyb.
- Nakonec v bloku nakonec() vymažeme časový limit pomocí clearTimeout(), abychom zabránili spuštění časového limitu, pokud se požadavek na načtení dokončí před vypršením časového limitu.
Odeslání žádosti včetně přihlašovacích údajů
Chcete-li odeslat požadavek včetně přihlašovacích údajů, jako je např cookies , v požadavku načtení můžete nastavit vlastnost pověření tak, aby zahrnovala.
co je ymail
fetch('https://example.com', { credentials: 'include', });>Pokud chcete přihlašovací údaje odeslat pouze v případě, že adresa URL požadavku je ve stejném původu jako volající skript, přidejte přihlašovací údaje: „stejný původ“.
// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });>Příklady použití metody JavaScript fetch()
Zde jsou některé případy použití metody načítání. Toto jsou běžné problémy, se kterými se začínající vývojáři potýkají při práci s načítáním.
1. Jak používat JavaScript Fetch API k získání dat
Požadavek JavaScript Get se používá k načtení dat ze serveru. Chcete-li použít rozhraní Fetch API v JavaScriptu k získání dat ze serveru, můžete zadat požadavek GET na požadovanou adresu URL a zpracovat odpověď.
2. Metoda Get and Post pomocí Fetch API
Metodu fetch() lze použít s jakýmkoli typem požadavku, jako je např POŠTA , DOSTAT , DÁT, a VYMAZAT , Metoda GET používá rozhraní fetch API
3. Rozdíl mezi Fetch a Axios pro vytváření požadavků http
Axios je samostatný balíček třetí strany, který lze snadno nainstalovat a Fetch je zabudován do většiny moderních prohlížečů; jako taková není nutná žádná instalace.
Podporované prohlížeče:
JavaScript Fetch je ECMAScript6 (ES6) a je podporována téměř všemi moderními prohlížeči, jako jsou:
- Google Chrome
- Okraj
- Firefox
- Opera
- Safari