„JavaScript“.fetch()>metodas, naudojamas norint gauti išteklius iš serverio. Jis grąžina pažadą, atsakydamas į atsakymo objektą, kuris apima serverio atsakymą į užklausą.fetch()>palengvina GET užklausų, paprastai naudojamų duomenims gauti, ir GET užklausų pateikimą PAST užklausos, naudojamos duomenims skelbti į serverius.
Be to, fetch()> sklandžiai integruoja pažangius HTTP tokias funkcijas kaip Įvairios kilmės išteklių bendrinimas (CORS) ir kiti plėtiniai, praturtinantys žiniatinklio kūrimo patirtį padidindami saugumą ir suderinamumą.
Pastaba: „Fettch“ API yra su metodu „fetch()“, kuris naudojamas duomenims iš skirtingų šaltinių gauti.
Sintaksė:
mesti sql
fetch('url') // api for the get request .then(response =>response.json()) .then(data => console.log(data));>Parametrai:
- URL: URL, kuriuo turi būti pateikta užklausa.
- Galimybės: Tai savybių rinkinys. Tai yra neprivaloma parametras. Galimos šios parinktys:
- Metodas: Nurodo HTTP metodą užklausai. (gali būti GET, POST, PUT arba DELETE)
- Antraštės
- Kūnas: Duomenys siunčiami kartu su užklausa.
- Režimas: Nurodo užklausos režimą (pvz. korsas, nocors, tos pačios kilmės ir tt)
- Įgaliojimai : nurodo, ar su užklausa siųsti vartotojo kredencialus (slapukus, autentifikavimo antraštes ir kt.)
JavaScript fetch() metodo pavyzdžiai
Pažvelkime į kai kuriuos gavimo metodo pavyzdžius. Šie pavyzdžiai suteikia jums išsamų supratimą apie „JavaScript“ gavimo metodą.
1 . Gaukite užklausą naudodami „Fetch“.
Šiame pavyzdyje parodyta, kaip gauti užklausą gavimo metodu.
Pastaba: Be parinkčių „Fetch“ visada veiks kaip gavimo užklausa.
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) })> Išvestis:
Paaiškinimas:
- Funkcija JS fetch() naudojama siųsti GET užklausą į URL https://jsonplaceholder.typicode.com/todos/1. Ši funkcija grąžina pažadą, kuris išsprendžia atsakymo objektą, atspindintį atsakymą į užklausą.
- Metodas then() yra susietas su fetch() iškvietimu, kad atsakymas būtų tvarkomas asinchroniškai. Atgalinio skambinimo funkcijoje, perduodamoje tada(), iškviečiamas metodas res.json(), kad atsakymo turinys būtų išanalizuotas kaip JSON. Šis metodas taip pat grąžina pažadą, kuris išsprendžia analizuotus JSON duomenis.
- Kitas then() metodas yra sujungtas su išanalizuotais JSON duomenimis. Atgalinio skambinimo funkcijoje išanalizuoti JSON duomenys d registruojami konsolėje naudojant console.log()
2 . Naudojant iškvietimą paskelbti JSON duomenis
Šiame pavyzdyje įkėlėme JSON duomenis naudodami „JavaScript“ API „fetch()“. Galite nustatyti užklausos turinį į sutrumpintos JSON duomenų versiją ir nustatyti atitinkamas antraštes, rodančias, kad siunčiate JSON.
Skelbimo užklausas galima pateikti naudojant „Ftch“ nurodant toliau pateiktas parinktis:
let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }>Patikrinę paskelbimo užklausos sintaksę, pažiūrėkite į toliau pateiktą pavyzdį, kuriame parodyta, kaip naudoti siuntimo užklausą gavimo metodu.
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 =>{ // Patikrinkite, ar užklausa buvo sėkminga if (!response.ok) { throw new Error('Tinklo atsakymas nebuvo gerai'); } // Išanalizuoti atsakymą kaip JSON return response.json(); }) .then(data => { // Tvarkykite JSON duomenis console.log(data); }) .catch(error => { // Tvarkykite visas klaidas, įvykusias gavimo console.error('Fetch error: ', klaida });>> Paaiškinimas:
- Mes nustatome jūsų JSON duomenis.
- Nustatėme gavimo užklausos parinktis, įskaitant metodą, nustatytą į „POST“, turinio tipo antraštę „application/json“ ir pagrindinį tekstą, kuriame nustatyta JSON sutrumpinta jūsų duomenų versija.
- Pateikiame užklausą su pateiktomis parinktimis naudodami fetch() funkciją.
- Likusi kodo dalis lieka tokia pati, kaip ir anksčiau, tvarko atsakymą ir visas klaidas, atsirandančias gavimo metu.
3. Atšaukti gavimo užklausą
Galite naudoti AbortController ir AbortSignal sąsaja norėdami nutraukti gavimo užklausą „JavaScript“.
Javascript{ controller.abort(); // Nutraukite gavimo užklausą console.log('Pasiekimo užklausa baigėsi'); }, 5000); // Tvarkykite gavimo užklausą fetchPromise .then(response => { // Patikrinkite, ar užklausa buvo sėkminga if (!response.ok) { throw new Error('Tinklo atsakymas buvo netinkamas'); } // Išanalizuoti atsakymas kaip JSON grąžina atsakymą.json(); fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Išvalyti skirtąjį laiką });>> Paaiškinimas:
- Sukuriame naują AbortController egzempliorių ir gauname jo signalą.
- Pateikiame užklausą gauti naudodami fetch() su pateiktomis parinktimis.
- Naudodami setTimeout() nustatėme 5 sekundžių skirtąjį laiką, kad nutrauktume gavimo užklausą, jei tai užtrunka per ilgai.
- Atgalinio laiko iškvietimo metu iškviečiame controller.abort(), kad nutrauktume gavimo užklausą.
- Gavimo užklausą tvarkome kaip įprasta, įskaitant atsakymo analizę ir klaidų tvarkymą.
- Galiausiai, bloke final() išvalome skirtąjį laiką naudodami clearTimeout(), kad neleistume suaktyvinti skirtojo laiko, jei gavimo užklausa baigiama nepasibaigus skirtajam laikui.
Užklausos, įskaitant kredencialus, siuntimas
Norėdami išsiųsti užklausą, įskaitant kredencialus, pvz sausainiai , gavimo užklausoje galite nustatyti, kad kredencialų ypatybė būtų įtraukta.
fetch('https://example.com', { credentials: 'include', });> Jei kredencialus norite siųsti tik tuo atveju, jei užklausos URL yra toje pačioje vietoje kaip ir iškvietimo scenarijus, pridėkite kredencialus: „same-origin“.
„JavaScript fetch()“ metodo naudojimo atvejai
Štai keletas gavimo metodo naudojimo atvejų. Tai dažnos problemos, su kuriomis susiduria pradedantieji kūrėjai dirbdami su „Ftch“.
1. Kaip naudoti „JavaScript Fetch“ API duomenims gauti
„JavaScript Get“ užklausa naudojama duomenims iš serverio gauti. Norėdami naudoti „JavaScript“ iškvietimo API, norėdami gauti duomenis iš serverio, galite pateikti GET užklausą norimam URL ir apdoroti atsakymą.
2. Gauti ir paskelbti metodas naudojant Fetch API
Fetch() metodas gali būti naudojamas su bet kokio tipo užklausomis, pvz PAST , GAUTI , PUT, ir IŠTRINTI , GET metodas naudoja gavimo API
3. Skirtumas tarp „Fettch“ ir „Axios“ teikiant http užklausas
„Axios“ yra atskiras trečiosios šalies paketas, kurį galima lengvai įdiegti, o „Fetch“ yra integruotas į daugumą šiuolaikinių naršyklių; joks montavimas nereikalingas.
Palaikomos naršyklės:
JAV miestų pavadinimai
„JavaScript Fetch“ yra ECMAScript6 (ES6) funkcija ir palaikoma beveik visose šiuolaikinėse naršyklėse, pvz.:
- Google Chrome
- Kraštas
- Firefox
- Opera
- Safari