Level 46
Not 100% sure but a try/catch block in the component should work.
Jan 13, 2021
7
Level 5
How can I throw the error from axios (in vuex actions state) and catch it in the compoent ???
I am using axios 0.21.1 in vuex actions to get the grid data.
The problem is I don't know how to throw the response back to the component:
actions: {
loadGridData({ commit, getters }, url) {
axios.get(url + getters.gridQueries, {
headers: {Authorization: 'Bearer ' + access_token}
}).then(function (response) {
commit('addGridData', response.data);
}).catch(function (error) {
throw new Error(error.response.data);
})
}
}
On the component
this.$store.dispatch('loadGridData', this.url).catch(error => {
this.$swal('Server Error!', error, 'error');
});
I am getting in consonsole:
Uncaught (in promise) Error: test error
where "test error" is a message generated by me with a 500 response to test the catch errors in laravel.
return response()->json('test error',500);
How can I throw the error from axios (in vuex actions state) and catch it in the compoent ???
Level 5
I have tried but is not working.
try {
this.$store.dispatch('loadGridData', this.url);
} catch (error) {
this.$swal('Server Error!', error, 'error');
}
Level 5
I know that axios already returns a Promise so it's not necessary to wrap it in another.... but this is how I got it got it worked.
actions: {
loadGridData({ commit, getters}, url) {
return new Promise((resolve, reject) => {
axios.get(url + getters.gridQueries, {
headers: {Authorization: 'Bearer ' + access_token}
}).then(function (response) {
commit('addGridData', response.data);
}).catch(function (error) {
reject(error.response.data);
})
})
}
and in the component:
this.$store.dispatch('loadGridData', this.url).catch(error => {
this.$swal('Server Error!', error, 'error');
});
Level 80
@calin.ionut You should only be updating the data in your store if the HTTP call was successful:
axios.get('/some-uri').then((response) => {
// Put response data in store using mutator
this.$store.commit('some-mutation', response.data);
}).catch((error) => {
// Display error in UI or something
});
1 like
Level 1
async some_function({ commit }, data) {
try {
let res = await axios.post('your_api', data)
commit('your_mutation', res)
},
catch(error) {
throw new Error(error)
}
Level 1
In your first line axios.get(url + getters.gridQueries, { make sure you return the promise!
return axios.get(url + getters.gridQueries, {
The solution of wrapping the new promise around axios works because it is returned to the page.
This also works with async/await as long as your caller on the page is also async/await on the function and awaits the action of the Store.
Level 80
@triangularsquare This thread was over a year old…
Please or to participate in this conversation.