Il JavaScript fetch()> metodo utilizzato per recuperare risorse da un server. Restituisce una Promise, risolvendosi nell'oggetto Response, che incapsula la risposta del server alla richiesta. fetch()> facilita l'esecuzione di richieste GET, tipicamente utilizzate per il recupero dei dati, e INVIARE richieste, utilizzate per inviare dati ai server.

Inoltre, fetch()> integra perfettamente avanzato HTTP funzionalità come Condivisione di risorse tra origini (CORS) e altre estensioni, arricchendo l'esperienza di sviluppo web con maggiore sicurezza e interoperabilità.

Nota: l'API Fetch viene fornita con il metodo fetch(), utilizzato per recuperare dati da diverse origini.

Sintassi:

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

parametri:

• URL: L'URL a cui effettuare la richiesta.
• Opzioni: È una serie di proprietà. È un opzionale parametro. Le opzioni disponibili sono:
  • Metodo: Specifica il metodo HTTP per la richiesta. (può essere GET, POST, PUT o DELETE)
  • Intestazioni
  • Corpo: Dati da inviare insieme alla richiesta.
  • Modalità: Specifica la modalità di richiesta (es. corso, nocors, stessa origine, ecc.)
  • Credenziali : specifica se inviare le credenziali dell'utente (cookie, intestazioni di autenticazione, ecc.) con la richiesta

Esempi di metodi JavaScript fetch()

Diamo un'occhiata ad alcuni esempi del metodo fetch. Questi esempi forniscono una comprensione completa del metodo fetch in JavaScript.

1 . Ottieni richiesta utilizzando Fetch

Questo esempio mostra come effettuare la richiesta Ottieni nel metodo fetch.

Nota: Senza opzioni, Fetch fungerà sempre da richiesta di acquisizione.

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

Produzione:

Spiegazione:

1. La funzione JS fetch() viene utilizzata per inviare una richiesta GET all'URL https://jsonplaceholder.typicode.com/todos/1. Questa funzione restituisce una Promise che si risolve in un oggetto Response che rappresenta la risposta alla richiesta.
2. Il metodo then() è concatenato alla chiamata fetch() per gestire la risposta in modo asincrono. All'interno della funzione di callback passata a then(), viene chiamato il metodo res.json() per analizzare il corpo della risposta come JSON. Questo metodo restituisce anche una Promise che si risolve nei dati JSON analizzati.
3. Un altro metodo then() viene concatenato per gestire i dati JSON analizzati. All'interno della sua funzione di callback, i dati JSON analizzati vengono registrati sulla console utilizzando console.log()

2 . Utilizzo del recupero per pubblicare dati JSON

In questo esempio, abbiamo caricato i dati JSON utilizzando l'API fetch() in JavaScript, puoi impostare il corpo della richiesta su una versione con stringa JSON dei tuoi dati e impostare le intestazioni appropriate per indicare che stai inviando JSON.

Le richieste di post possono essere effettuate utilizzando il recupero fornendo le opzioni indicate di seguito:

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

Dopo aver controllato la sintassi della richiesta post, guarda l'esempio seguente che dimostra l'utilizzo della richiesta post nel metodo fetch.

// 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 =>{ // Controlla se la richiesta ha avuto successo if (!response.ok) { lancia un nuovo errore ('La risposta della rete non era ok');  } // Analizza la risposta come JSON return risposta.json();  }) .then(data => { // Gestisci i dati JSON console.log(data); }) .catch(error => { // Gestisci eventuali errori che si sono verificati durante il recupero console.error('Errore di recupero: ', errore }); 

Spiegazione:

• Definiamo i tuoi dati JSON.
• Impostiamo le opzioni per la richiesta di recupero, incluso il metodo impostato su 'POST', l'intestazione Content-Type impostata su 'application/json' e il corpo impostato sulla versione stringata JSON dei tuoi dati.
• Effettuiamo la richiesta di recupero con le opzioni fornite utilizzando la funzione fetch().
• Il resto del codice rimane lo stesso di prima, gestendo la risposta e gli eventuali errori che si verificano durante il recupero.

3. Interruzione di una richiesta di recupero

Puoi usare il AbortController E Interfaccia segnale di interruzione per interrompere una richiesta di recupero in 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(); // Interrompe la richiesta di recupero console.log('Richiesta di recupero scaduta'); }, 5000); // Gestisci la richiesta di recupero fetchPromise .then(response => { // Controlla se la richiesta ha avuto successo if (!response.ok) { lancia un nuovo errore ('La risposta della rete non era ok'); } // Analizza la risposta come JSON return risposta.json(); }) .then(data => { // Gestisce i dati JSON console.log(data); }) .catch(error => { // Gestisce eventuali errori che si sono verificati durante fetch console.error('Errore di recupero:', errore }) .finally(() => { clearTimeout(timeoutId); // Cancella il timeout }); 

Spiegazione:

• Creiamo una nuova istanza AbortController e otteniamo il suo segnale.
• Effettuiamo la richiesta di recupero utilizzando fetch() con le opzioni fornite.
• Impostiamo un timeout di 5 secondi utilizzando setTimeout() per interrompere la richiesta di recupero se impiega troppo tempo.
• All'interno del callback di timeout, chiamiamo controller.abort() per interrompere la richiesta di recupero.
• Gestiamo la richiesta di recupero come al solito, inclusa l'analisi della risposta e la gestione di eventuali errori.
• Infine, nel blocco last(), cancelliamo il timeout utilizzando clearTimeout() per evitare che il timeout si attivi se la richiesta di recupero viene completata prima della scadenza del timeout.

Invio di una richiesta comprensiva di credenziali

Per inviare una richiesta includendo credenziali, come ad esempio biscotti , in una richiesta di recupero è possibile impostare la proprietà delle credenziali da includere.

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

Se desideri inviare le credenziali solo se l'URL della richiesta si trova sulla stessa origine dello script chiamante, aggiungi le credenziali: 'same-origin'.

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

Casi d'uso del metodo JavaScript fetch()

Ecco alcuni dei casi d'uso del metodo fetch. Questi sono problemi comuni che gli sviluppatori principianti devono affrontare quando lavorano con fetch.

1. Come utilizzare l'API Fetch JavaScript per ottenere dati

La richiesta Get JavaScript viene utilizzata per recuperare i dati da un server. Per utilizzare l'API Fetch in JavaScript per ottenere dati da un server, puoi effettuare una richiesta GET all'URL desiderato e gestire la risposta.

2. Metodo Get e Post utilizzando l'API Fetch

Un metodo fetch() può essere utilizzato con qualsiasi tipo di richiesta come INVIARE , OTTENERE , METTERE, E ELIMINARE , Il metodo GET utilizza l'API di recupero

3. Differenza tra Fetch e Axios per effettuare richieste http

Axios è un pacchetto autonomo di terze parti che può essere facilmente installato e Fetch è integrato nella maggior parte dei browser moderni; non è richiesta alcuna installazione in quanto tale.

Browser supportati:

Il recupero JavaScript è un file ECMAScript6 (ES6) funzionalità ed è supportato su quasi tutti i browser moderni come:

• Google Chrome
• Bordo
• Firefox
• musica lirica
• Safari