Het JavaScriptfetch()>methode die wordt gebruikt voor het ophalen van bronnen van een server. Het retourneert een belofte, die wordt omgezet in het Response-object, dat de reactie van de server op het verzoek omvat.fetch()>vergemakkelijkt het maken van zowel GET-verzoeken, doorgaans gebruikt voor het ophalen van gegevens, als NA verzoeken, gebruikt voor het posten van gegevens naar servers.
Verder, fetch()> integreert naadloos geavanceerde HTTP functionaliteiten zoals Cross-Origin Resource Sharing (CORS) en andere extensies, waardoor de webontwikkelingservaring wordt verrijkt met verbeterde beveiliging en interoperabiliteit.
Opmerking: De Fetch API wordt geleverd met de fetch()-methode, die wordt gebruikt om gegevens uit verschillende bronnen op te halen.
Syntaxis:
verschil tussen een gigabyte en een megabyte
fetch('url') // api for the get request .then(response =>response.json()) .then(data => console.log(data));>Parameters:
- URL: De URL waarnaar het verzoek moet worden verzonden.
- Opties: Het is een reeks eigenschappen. Het is een optioneel parameter. Beschikbare opties zijn:
- Methode: Specificeert de HTTP-methode voor de aanvraag. (kan GET, POST, PUT of DELETE zijn)
- Kopteksten
- Lichaam: Gegevens die bij het verzoek moeten worden meegestuurd.
- Modus: Specificeert de verzoekmodus (bijv. Cors, nocors, dezelfde oorsprong, enz.)
- Referenties : specificeert of gebruikersreferenties (cookies, authenticatieheaders, enz.) met het verzoek moeten worden meegestuurd
JavaScript fetch() Methode Voorbeelden
Laten we eens kijken naar enkele voorbeelden van de ophaalmethode. Deze voorbeelden geven u een volledig inzicht in de ophaalmethode in JavaScript.
1 . Ontvang een verzoek met behulp van Fetch
Dit voorbeeld laat zien hoe u een Get-verzoek kunt indienen in de ophaalmethode.
Opmerking: Zonder opties zal Fetch altijd fungeren als een get-verzoek.
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) })> Uitgang:
Uitleg:
- De JS fetch() functie wordt gebruikt om een GET-verzoek naar de URL https://jsonplaceholder.typicode.com/todos/1 te sturen. Deze functie retourneert een belofte die wordt omgezet in een Response-object dat het antwoord op de aanvraag vertegenwoordigt.
- De methode then() is gekoppeld aan de aanroep fetch() om het antwoord asynchroon af te handelen. Binnen de callback-functie die wordt doorgegeven aan then(), wordt de methode res.json() aangeroepen om de antwoordtekst te parseren als JSON. Deze methode retourneert ook een belofte die wordt omgezet in de geparseerde JSON-gegevens.
- Een andere then()-methode is gekoppeld om de geparseerde JSON-gegevens te verwerken. Binnen de callback-functie worden de geparseerde JSON-gegevens d naar de console gelogd met behulp van console.log()
2 . Fetch gebruiken om JSON-gegevens te posten
In dit voorbeeld hebben we JSON-gegevens geüpload met behulp van de fetch() API in JavaScript. U kunt de verzoektekst instellen op een JSON-stringified versie van uw gegevens en de juiste headers instellen om aan te geven dat u JSON verzendt.
Postverzoeken kunnen worden gedaan met behulp van fetch door de onderstaande opties op te geven:
let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }>Nadat u de syntaxis van het postverzoek heeft gecontroleerd, bekijkt u het onderstaande voorbeeld waarin het gebruik van een postverzoek in de fetch-methode wordt gedemonstreerd.
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 =>{// Controleer of het verzoek succesvol was if (!response.ok) { throw new Error('Netwerkreactie was niet ok'); } // Parseer het antwoord als JSON return response.json(); }) .then(data => {// Behandel de JSON-gegevens console.log(data); }) .catch(error => {// Behandel eventuele fouten die zijn opgetreden tijdens het ophalen van console.error('Fetch error: ', fout); });> Uitleg:
- Wij definiëren uw JSON-gegevens.
- We hebben opties ingesteld voor het ophaalverzoek, inclusief de methode die is ingesteld op ‘POST’, de Content-Type header is ingesteld op ‘application/json’ en de hoofdtekst is ingesteld op de JSON-stringified versie van uw gegevens.
- We maken het ophaalverzoek met de gegeven opties met behulp van de fetch() functie.
- De rest van de code blijft hetzelfde als voorheen en verwerkt het antwoord en eventuele fouten die optreden tijdens het ophalen.
3. Een ophaalverzoek afbreken
U kunt gebruik maken van de AbortController En AbortSignaal-interface om een ophaalverzoek in JavaScript af te breken.
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(); // Het ophaalverzoek afbreken console.log('Fetch request time-out'); }, 5000); // Behandel het ophaalverzoek fetchPromise .then(response => {// Controleer of het verzoek succesvol was if (!response.ok) { throw new Error('Netwerkreactie was niet ok'); } // Parseer de response as JSON return response.json( }) .then(data => {// Behandel de JSON-gegevens console.log(data); }) .catch(error => {// Behandel eventuele fouten die zijn opgetreden tijdens de fetch console.error('Fetch error:', fout }) .finally(() => { clearTimeout(timeoutId); // Wis de time-out });> Uitleg:
- We maken een nieuwe AbortController-instantie en verkrijgen het signaal ervan.
- We maken het ophaalverzoek met behulp van fetch() met de gegeven opties.
- We hebben een time-out van 5 seconden ingesteld met setTimeout() om het ophaalverzoek af te breken als het te lang duurt.
- Binnen de time-out-callback roepen we controller.abort() aan om het ophaalverzoek af te breken.
- We behandelen het ophaalverzoek zoals gewoonlijk, inclusief het parseren van het antwoord en het afhandelen van eventuele fouten.
- Ten slotte wissen we in het blok final() de time-out met behulp van clearTimeout() om te voorkomen dat de time-out wordt geactiveerd als het ophaalverzoek is voltooid voordat de time-out is verlopen.
Een verzoek verzenden inclusief inloggegevens
Om een verzoek te verzenden inclusief inloggegevens, zoals koekjes , kunt u in een ophaalverzoek instellen dat de eigenschap Credentials moet worden opgenomen.
fetch('https://example.com', { credentials: 'include', });>Als u alleen inloggegevens wilt verzenden als de aanvraag-URL dezelfde oorsprong heeft als het aanroepende script, voegt u inloggegevens toe: ‘same-origin’.
// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });>JavaScript fetch() Methode Gebruiksscenario's
Hier zijn enkele gebruiksscenario's van de ophaalmethode. Dit zijn veelvoorkomende problemen waarmee beginnende ontwikkelaars te maken krijgen bij het werken met fetch.
Java-codering if else-instructie
1. Hoe u de JavaScript Fetch API gebruikt om gegevens op te halen
JavaScript Get-verzoek wordt gebruikt om gegevens van een server op te halen. Om de Fetch API in JavaScript te gebruiken om gegevens van een server op te halen, kunt u een GET-verzoek indienen bij de gewenste URL en het antwoord afhandelen.
2. Get- en Post-methode met behulp van de Fetch-API
Een fetch()-methode kan worden gebruikt bij elk type verzoek, zoals NA , KRIJGEN , NEERZETTEN, En VERWIJDEREN , GET-methode maakt gebruik van de fetch-API
3. Verschil tussen Fetch en Axios voor het doen van http-verzoeken
Axios is een zelfstandig pakket van derden dat eenvoudig kan worden geïnstalleerd en Fetch is ingebouwd in de meeste moderne browsers; er is geen installatie als zodanig vereist.
Ondersteunde browsers:
JavaScript Fetch is een ECMAScript6 (ES6) functie en wordt ondersteund door bijna alle moderne browsers, zoals:
- Google Chrome
- Rand
- Firefox
- Opera
- Safari