Force download GET request using axios

During the interview, you mentioned that using axios for force downloading GET requests is a very practical skill, especially when you need to retrieve files from the server and prompt users to save them to their local systems. Below, I will explain how to implement this functionality and provide a specific code example.

Implementation Steps

1. Install and Import the Axios Library: First, ensure that axios is installed in your project. You can use npm or yarn for installation.

   bash
   npm install axios

   Import axios in your code:

   javascript
   import axios from 'axios';

2. Configure Axios Requests: To implement file downloads, configure Axios appropriately, such as setting the response type to blob to handle binary files.

   javascript
   const config = {
       responseType: 'blob',  // Indicates the data type returned from the server
   };

3. Send GET Request and Handle Response: Use Axios to send a GET request and receive the file in the response. Then create a URL object and use it along with an HTML <a> tag to trigger the download.

   javascript
   axios.get('your file URL', config)
       .then(response => {
           const url = window.URL.createObjectURL(new Blob([response.data]));
           const link = document.createElement('a');
           link.href = url;
           link.setAttribute('download', 'filename.extension');  // Specify the filename and extension for download
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
           window.URL.revokeObjectURL(url);  // Revoke the blob URL
       })
       .catch(error => console.error('Error downloading file:', error));

Example Code

Suppose we need to download a file named example.pdf from the server. Here is the complete code example:

javascript
import axios from 'axios';

function downloadFile() {
    const config = {
        responseType: 'blob',
    };

    axios.get('http://example.com/example.pdf', config)
        .then(response => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'example.pdf');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
        })
        .catch(error => console.error('Error downloading file:', error));
}

Important Notes

• Ensure that the server response headers include the correct Content-Type and Content-Disposition, which help the browser understand the file type and handle the download.
• In actual deployment, handle errors and exceptions properly, such as network errors or unreachable files.
• Consider browser compatibility and security settings; some browsers may block automatic downloads.

By using the above methods, we can effectively implement forced file downloads using the Axios library. This technique is very common in practical work, especially when providing server resources for users to download directly.