JavaScriptetfetch()>metod som används för att hämta resurser från en server. Den returnerar ett löfte, som löser sig till Response-objektet, som kapslar in serverns svar på begäran.fetch()>underlättar att göra både GET-förfrågningar, som vanligtvis används för att hämta data, och POSTA förfrågningar, som används för att skicka data till servrar.

Dessutom, fetch()> integrerar avancerade sömlöst HTTP funktioner som t.ex Cross-Origin Resource Sharing (CORS) och andra tillägg, som berikar webbutvecklingsupplevelsen med förbättrad säkerhet och interoperabilitet.

Obs: Fetch API kommer med metoden fetch() som används för att hämta data från olika källor.

Syntax:

vad gör en dator snabb

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

Parametrar:

• URL: URL:en som begäran ska göras till.
• Alternativ: Det är en rad egenskaper. Det är en frivillig parameter. Tillgängliga alternativ är:
  • Metod: Anger HTTP-metod för begäran. (kan vara GET, POST, PUT eller DELETE)
  • Rubriker
  • Kropp: Data som ska skickas med begäran.
  • Läge: Anger förfrågningsläge (t.ex. cors, nocors, samma ursprung, etc)
  • Referenser : Anger om användaruppgifter (cookies, autentiseringsrubriker, etc.) ska skickas med begäran

JavaScript fetch() Metodexempel

Låt oss titta på några av exemplen på hämtningsmetoden. Dessa exempel ger dig en fullständig förståelse för hämtningsmetoden i JavaScript.

1 . Få förfrågan med hjälp av Fetch

Det här exemplet visar hur man gör Get request in fetch-metoden.

Notera: Utan alternativ kommer Hämta alltid att fungera som en get-begäran.

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

Produktion:

Förklaring:

1. Funktionen JS fetch() används för att skicka en GET-förfrågan till URL:en https://jsonplaceholder.typicode.com/todos/1. Denna funktion returnerar ett löfte som löser sig till ett Response-objekt som representerar svaret på begäran.
2. Metoden then() är kopplad till anropet fetch() för att hantera svaret asynkront. Inuti callback-funktionen som skickas till then() anropas metoden res.json() för att analysera svarskroppen som JSON. Den här metoden returnerar också ett löfte som löser sig till den analyserade JSON-datan.
3. En annan then()-metod är kedjad för att hantera den analyserade JSON-datan. Inuti dess callback-funktion loggas den analyserade JSON-datan d till konsolen med console.log()

2 . Använder hämta för att lägga upp JSON-data

I det här exemplet har vi laddat upp JSON-data med hjälp av fetch()-API:et i JavaScript, du kan ställa in begärandekroppen till en JSON-strängad version av dina data och ställa in lämpliga rubriker för att indikera att du skickar JSON.

Postförfrågningar kan göras med hjälp av hämta genom att ange alternativen nedan:

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

Efter att ha kontrollerat syntaxen för postbegäran, titta på exemplet nedan som visar hur postbegäran används i hämtningsmetoden.

// 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 =>{ // Kontrollera om begäran lyckades om (!response.ok) { throw new Error('Nätverkssvaret var inte ok');  } // Analysera svaret som JSON return response.json();  }) .then(data => { // Hantera JSON-data console.log(data); }) .catch(error => { // Hantera eventuella fel som uppstod under hämta console.error('Fetch error: ', fel);>

Förklaring:

• Vi definierar dina JSON-data.
• Vi ställer in alternativ för hämtningsbegäran, inklusive metoden inställd på 'POST', Content-Type-huvudet inställd på 'applikation/json' och texten inställd på den JSON-strängade versionen av din data.
• Vi gör hämta-begäran med de angivna alternativen med hjälp av funktionen fetch().
• Resten av koden förblir densamma som tidigare, hanterar svaret och eventuella fel som uppstår under hämtningen.

3. Avbryta en hämtningsförfrågan

Du kan använda AbortController och Avbryt signalgränssnitt för att avbryta en hämtningsförfrågan i 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(); // Avbryt hämtningsförfrågan console.log('Hämtningsbegäran tog timeout'); }, 5000); // Hantera hämtningsförfrågan fetchPromise .then(respons => { // Kontrollera om begäran lyckades om (!response.ok) { throw new Error('Nätverkssvaret var inte ok'); } // Analysera svar som JSON returnera response.json(); fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Rensa timeout });>

Förklaring:

• Vi skapar en ny AbortController-instans och får dess signal.
• Vi gör hämtningsförfrågan med hjälp av fetch() med de angivna alternativen.
• Vi ställer in en timeout på 5 sekunder med setTimeout() för att avbryta hämtningsförfrågan om det tar för lång tid.
• Inuti timeout-återuppringningen anropar vi controller.abort() för att avbryta hämtningsförfrågan.
• Vi hanterar hämtningsförfrågan som vanligt, inklusive att analysera svaret och hantera eventuella fel.
• Slutligen, i finally()-blocket rensar vi timeouten med clearTimeout() för att förhindra att timeouten utlöses om hämtningsförfrågan slutförs innan timeouten löper ut.

Skickar en förfrågan inklusive inloggningsuppgifter

För att skicka en förfrågan inklusive referenser, som t.ex småkakor , i en hämtningsförfrågan kan du ställa in autentiseringsegenskapen att inkludera.

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

Om du bara vill skicka autentiseringsuppgifter om webbadressen för begäran är på samma ursprung som det anropande skriptet, lägg till autentiseringsuppgifter: 'same-origin'.

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

JavaScript fetch() Användningsfall för metod

Här är några av användningsfallen för hämtningsmetoden. Det här är vanliga problem som nybörjarutvecklare möter när de arbetar med hämtning.

1. Hur man använder JavaScript Fetch API för att hämta data

JavaScript Get request används för att hämta data från en server. För att använda Fetch API i JavaScript för att hämta data från en server kan du göra en GET-förfrågan till önskad URL och hantera svaret.

2. Get and Post-metoden med Fetch API

En fetch()-metod kan användas med vilken typ av begäran som helst som t.ex POSTA , SKAFFA SIG , SÄTTA, och RADERA , GET-metoden använder hämta API

3. Skillnad mellan Fetch och Axios för att göra http-förfrågningar

Axios är ett fristående tredjepartspaket som enkelt kan installeras och Fetch är inbyggt i de flesta moderna webbläsare; ingen installation krävs som sådan.

Webbläsare som stöds:

uri vs url

JavaScript Hämta är en ECMAScript6 (ES6) funktion och stöds av nästan alla moderna webbläsare som:

• Google Chrome
• Kant
• Firefox
• Opera
• Safari