Axios catches error then something throws the error again

Question

I have this method:

service

const errorData = {"message":"Error", "data": []};

list(url) {
  return new Promise((resolve) => {
    axios.get(url).then((response) => {
      resolve(response.data);
    }).catch((error) => {
      resolve(errorData)
    });
  })
},

module store

 state: {
    list: []
 },
 getters: {
        list: state => state.list,
 },
 mutations: {
    LIST(state, payload) {
       state.list = payload || [];
    },
 }
actions: {
   list({ commit }) {
     commit('LIST', []);

     return service
          .list('api/list')
          .then((list) => {
           commit('LIST', list);
           });
    },
}

list component

this.$store.dispatch(`module/store/list`).then(() => {
     setTimeout(() => {
         var message = this.$store.getters['module/list'].message;
         this.$refs.inform.open('Error', message).then(() => {
             this.$router.push ({ path: "/" });
         });
     }, 1000);
})

Note: response.data from successful API call return an object with the same structure as errorData.

When I turn off the server where it calls the API methods, Axios catches the error if there are any, but something throws an error and halts the app's current operation "net::ERR_CONNECTION_REFUSED". I don't know where to catch this. I've tried appending catches on all methods using Axios related to this but then I couldn't catch the error. It should stop when the error is initially caught by Axios without stopping the app's operation.

I'd really appreciate any advice that can be given to resolve this problem of mine. Thank you.

axios return a promise by default, is there a reason to wrap it again inside a promise? — Raja Sekar, Apr 15 '19 at 06:27
[What is the explicit promise construction antipattern and how do I avoid it?](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) — Phil, Apr 15 '19 at 07:00
As pointed out in the duplicate, you cannot stop the browser from logging the `net::ERR_CONNECTION_REFUSED` error. I am curious as to why you think this stops your application though. How are you using `list()`? What is it that you want to happen vs what is actually happening? — Phil, Apr 15 '19 at 07:13
@Phil oh, so the browser logging the error is unavoidable. Thank you for clearing that one for me. I'm using list() from the module store, the code in my question is like, the global caller of get methods in my main service file. As for my application stopping, after the error is logged in the browser console it's supposed to return a message back to the list and show it in a pop up message, but it doesn't. The page is blank and the the list is not rendered on the screen. I edited my question to clarify this :D — , Apr 15 '19 at 07:38
So `list` is actually `service.list()`? Does `commit('LIST', list)` not execute? Where do you dispatch the `list` action? — Phil, Apr 15 '19 at 14:22
Oh, I'm sorry I forgot to add list to the dispatch call. It is executed in this part `this.$store.dispatch(`module/store/list`)` — , Apr 16 '19 at 00:35
So what is it that's not executing? How are you determining the application has stopped? — Phil, Apr 16 '19 at 00:44
`getters: { list: state => state.list, }` just, why? What's the point of a getter that only returns the state property of the same name? — Phil, Apr 16 '19 at 00:47
@Phil the function can execute without any problem if the server is okay, I just wanted to catch the net::ERR_CONNECTION_REFUSED error in case the server is down. What I mean by the application stopping is when the error is thrown, the rendering of the list is halted when it is supposed to not do anything, just display empty since the data from errorData is []. The ones not executing are the following processes should the error appear. About the getter that only returns the state property of the same name, I'm supposed to follow some code standard hehe. — , Apr 16 '19 at 01:32
@Phil I'm sorry if I can't really relay my problem very well, English is still difficult for me. — , Apr 16 '19 at 01:32
That's the second time you've mentioned code standards that are anything but standard — Phil, Apr 16 '19 at 01:56

score 1 · Answer 1 · answered Apr 15 '19 at 06:25

You shouldn't resolve with an error. I assume that the code that calls the list method doesn't expect an error as the promise result, does it?

In case of error, the promise must be rejected, or you might want to catch the error and resolve with a default value, but resolving with the error doesn't make so much sense.

You can also simplify your code like this:

list(url) {
  return axios.get(url).then((response) => {
    return response.data;
  }).catch((error) => {
    return { items: [] }; // <--- default value
  });
}

I just tried this and the net::ERR_CONNECTION_REFUSED is still there and the operation stops. — , Apr 15 '19 at 06:35

score 0 · Answer 2 · answered Apr 15 '19 at 06:25

0

Check database connection first

Try this

async list(url){
  try {
    return await axios.get(url);
  } catch(e) {
    console.log('This is error:->', e);
  }
}

answered Apr 15 '19 at 06:25

Raj Jaril

376
1
16

Thank you for answering, unfortunately this does not work for me. – Apr 15 '19 at 06:41

score 0 · Answer 3 · answered Apr 15 '19 at 06:27

0

You can try below:

catch(error => {
        if (!error.response) {
            // network error
            this.errorStatus = 'Error: Network Error';
        } else {
            this.errorStatus = error.response.data.message;
        }
      })

answered Apr 15 '19 at 06:27

Mayur Patel

1,741
15
32

Hello, thank you for answering, but the error still persists and stops the app's current operation. – Apr 15 '19 at 06:43
1

Can I know why your app operation is stopping? Because you can catch network error using my code then rest of the thing you will have to handle in that network error block. – Mayur Patel Apr 15 '19 at 07:16
That's what I would like to know. I don't know where it is coming from, that's why I want to catch it in any way possible. – Apr 15 '19 at 07:33

Axios catches error then something throws the error again

3 Answers3