No error message on try catch block axios Response type is Blob

Question

Getting wrong error message

console.log(error)

devtools network Response

const handleDownloadPicture = async (ids: number) => {
    try {
        const response = await axios
            .post(`/api/folders/${folderDetails.id}/download`, {
                    resources: ids,
                },{responseType:'blob'},
            )
            .then(({ data: blob }) => {
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.href = url;
                link.download = 'myfile.zip';
                link.click();
            });
    } catch (error) {
        console.error(error);

    }
};

I'm getting the wrong error message on console.log(error)

have tried multiple solutions of converting blob response to json but no result

Answer 1

axios.post(`/api/folders/${folderDetails.id}/download`, {
    resources: ids,
  },{
    responseType:'blob'
  }).then(({ data: blob }) => {
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.href = url;
    link.download = 'myfile.zip';
    link.click();
  }).catch(async (error) => {
    console.log(JSON.parse(await error.response.data.text()));
  });

Answer 2

Becasue axios.post() is return Promise, you should use once in two way to get response or catch error: const response = await axios.post() or axios.post().then(response).catch().

You should use only once in two way:

Case 1:

    try {
       const response = await axios.post(`/api/folders/${folderDetails.id}/download`)
       ....
      } catch(error){
      console.log(error) // <=== Error will be catch here!
      }

Case 2:

axios.post(`/api/folders/${folderDetails.id}/download`, {
     resources: ids,
   },{responseType:'blob'},
   ).then(({ data: blob }) => {
       const link = document.createElement('a');
       const url = URL.createObjectURL(blob);
       link.href = url;
       link.download = 'myfile.zip';
       link.click();
     }).catch((error) => console.log(error) //<=== Error will be catch here!