Utilizzare la Fetch API per Gestire Risposte in Formato Blob

by Anastasia P.
Add as preferred source on Google
SHARE
Utilizzare la Fetch API per Gestire Risposte in Formato Blob
© Guida-HTML5.it

Introduzione

La Fetch API è una potente interfaccia JavaScript che consente di effettuare richieste HTTP in modo semplice e intuitivo. In questo tutorial, ci concentreremo su come gestire risposte in formato Blob, un tipo di oggetto che rappresenta dati binari. Questo è particolarmente utile quando si desidera scaricare file, come immagini o documenti, direttamente dal server.

Codice completo

const downloadImage = async (url) => {
    try {
        // Effettua la richiesta fetch
        const response = await fetch(url);

        // Controlla se la risposta è ok
        if (!response.ok) {
            throw new Error(´Errore nella risposta: ´ + response.status);
        }

        // Converte la risposta in un Blob
        const blob = await response.blob();

        // Crea un URL per il Blob
        const blobUrl = URL.createObjectURL(blob);

        // Crea un elemento  per il download
        const a = document.createElement(´a´);
        a.href = blobUrl;
        a.download = ´downloaded_image.png´; // Nome del file da scaricare
        document.body.appendChild(a);
        a.click(); // Simula il click per avviare il download
        document.body.removeChild(a); // Rimuove l´elemento  dal DOM

        // Rilascia l´oggetto URL
        URL.revokeObjectURL(blobUrl);
    } catch (error) {
        console.error(´Si è verificato un errore:´, error);
    }
};

// Esempio di utilizzo
downloadImage(´https://example.com/image.png´);

Spiegazione

Nel codice sopra, abbiamo definito una funzione downloadImage che accetta un URL come parametro. Ecco una spiegazione dettagliata dei passaggi:

  • Effettuare la richiesta: Utilizziamo fetch(url) per inviare una richiesta al server. Questa funzione restituisce una promessa che si risolve in un oggetto Response.
  • Controllare la risposta: Verifichiamo se la risposta è "ok" (status 200-299). Se non lo è, lanciamo un errore.
  • Convertire in Blob: Utilizziamo response.blob() per convertire la risposta in un oggetto Blob, che rappresenta i dati binari.
  • Crea un URL per il Blob: Con URL.createObjectURL(blob), generiamo un URL temporaneo che punta al nostro Blob.
  • Creare un elemento <a> per il download: Creiamo un elemento <a> e impostiamo il suo href all´URL del Blob. Impostiamo anche l´attributo download per specificare il nome del file da scaricare.
  • Simulare il click: Aggiungiamo l´elemento <a> al DOM e simula un click per avviare il download. Infine, rimuoviamo l´elemento dal DOM.
  • Rilasciare l´oggetto URL: Utilizziamo URL.revokeObjectURL(blobUrl) per liberare la memoria utilizzata dall´oggetto URL temporaneo.

Best practice

  • Gestire gli errori: È importante gestire gli errori in modo appropriato. Utilizzare un blocco try...catch per catturare eventuali errori durante la richiesta o la conversione dei dati.
  • Controllare il tipo di contenuto: Prima di convertire la risposta in un Blob, puoi controllare il tipo di contenuto per assicurarti che sia quello atteso (ad esempio, image/png per le immagini PNG).
  • Limitare l´uso di oggetti URL: Ricorda di rilasciare gli oggetti URL non più necessari per evitare perdite di memoria.
  • Usare nomi di file significativi: Quando imposti l´attributo download, assicurati di utilizzare nomi di file che abbiano senso per l´utente.

Riepilogo

In questo tutorial, abbiamo esplorato come utilizzare la Fetch API per gestire risposte in formato Blob. Abbiamo visto come effettuare una richiesta, controllare la risposta, convertire i dati in un Blob e scaricare il file risultante. Questa tecnica è particolarmente utile per il download di file binari come immagini e documenti.

Approfondisci con risorse ufficiali

Add as preferred source on Google
SHARE