CODEWITHSUNDEEP
reactjsaxios
lost9123193
lost9123193

Reputation: 11040

Axios catching a Promise Error

I have the following axios call:

axios.put({API_IMAGE_URL}}`, imageData, { withCredentials: true, headers: { 'Content-Type': 'multipart/form-data' } })
                .then(response => {
                    axios.get(`${API_URL}/images/${response.data.id}`, { withCredentials: true, headers: { 'Content-Type': 'multipart/form-data' } })
                        .then(response => {
                            var newFormat = response.data;
                            dispatch(updateFormat(newFormat))
                        });
                }).catch((e) => {
                    console.log("Can't update image ", e);

Essentially I have an image object that gets passed to a url. From there, I need to retrieve the new Image object with it's new ID to be used for other things.

If my image is too big, I the following errors:

413 (Request Entity Too Large)
Uncaught (in promise) Error: Network Error

My problem lies here. It gives me these errors and DOES NOT go to the catch clause. Is there a way to catch these promise errors?

Upvotes: 1

Views: 3450

Answers (1)

Prakash Sharma
Prakash Sharma

Reputation: 16482

Just return the second axios promise like this

    axios.put({API_IMAGE_URL}}`, imageData, { withCredentials: true, headers: { 'Content-Type': 'multipart/form-data' } }).then(response => {
        // Return the promise from here like this
        return axios.get(`${API_URL}/images/${response.data.id}`, { withCredentials: true, headers: { 'Content-Type': 'multipart/form-data' } }).then(response => {
            var newFormat = response.data;
            dispatch(updateFormat(newFormat))
       });
   }).catch((e) => {
       console.log("Can't update image ", e);

Upvotes: 1

Related Questions