Level 1
Hi have you find a solution for this?
Aug 7, 2018
8
Level 1
How to fix 500 and 429 errors with axios ?
Currently i'm working on a project with Laravel and Vuejs, in almost every components does have http requets at mounted method, but some times when the page is loaded the data wont appear on the page. It happens when navigate through pages randomly, which every page does have http request in mounted method. Then it give these errors,
500 (Internal Server Error)
429 (Too Many Requests)
for example dashboard views mounted method looks like this,
mounted(){
this.role = this.$store.getters.userRole;
var userRole = this.$auth.getUserRole();
axios.get('api/dashboard/getBonusesbyCustomers')
.then( response =>{
this.freeIssues = response.data
console.log('freeIssues')
console.log(this.freeIssues)
}).catch( res =>{
console.log(res)
})
axios.post('api/dashboard/getApprvalList')
.then( response =>{
this.appStock = response.data
console.log(response)
})
axios.get('api/transactions/getItemsCount ')
.then(response =>{
// console.log(response);
this.items = response.data;
})
}
Level 4
You can set or disable throttling in app/Http/Kernel.php
protected $middlewareGroups = [
//...
'api' => [
'throttle:60,1',
'bindings',
],
];
By default it allows 60 requests per minute.
Level 50
Whilst changing the throttle config value will resolve your issue you definitely have issue withg your Vue component making excessive axios calls. I'd personally take a look into your application and determine why so many calls are being made. 60 requests per minute for a single user is a lot.
The latter explains the 429 error, but not the 500 error. Can you provide some logs when a 500 error is thrown?
Level 47
500 could be anything of server side. Open browser dev tools , see network tab error message.
BTW , don't put everything in mounted , or extract to dedicated methods.
for example
mounted () {
this.getItems ()
this.getDashboard ()
},
methods: {
getItems () {
axios.get(url)
.then(response => { do something})
.catch(error)
.finally(() => {do something})
},
getDashboard() {same like above}
}
Level 1
@OZZFEST - Thanks :)
Level 1
@ROBSTAR - But I am not getting any 500 error. Even this issue occurs once in a blue moon.
It gives too many attempts and the system gets hanged.
Here is my component code
mounted () { const self = this; self.$store.commit('setEmptyBreadcrumbs', []); self.loadAdminForms(); self.getUserDetails(); self.$root.$on('trigger_page_load', (data) => { self.loadAdminForms(); self.getUserDetails(); }); }, methods: { loadAdminForms() { const self = this; const location_id = "all"; axios.get('/api/getForms/' + location_id).then(function (response) { self.administrativeForms = response.data.data.categories; }).catch((error) => { handleErrorResponse(error, self); }); },
getUserDetails() {
const self = this;
let userDetails = '';
let location_id = self.$route.params.location_id;
if (location_id) {
self.loadLocationForms(location_id);
} else {
axios.get('/api/getCurrentUserDetails').then((r) => {
userDetails = r.data
self.userDetails = userDetails;
if (userDetails.group == 1) {
self.showAdministrativeText = true;
} else {
self.showDepartments = true;
}
self.department_names = userDetails.department_names;
if (userDetails.user_locations[0] != undefined) {
self.loadLocationForms(userDetails.user_locations[0].id);
} else if (userDetails.user_locations[0] == undefined && (userDetails.group == 1 || userDetails.group == 2)) {
axios.get('/api/loadDropDownValues/5').then((res) => {
if (res.data.data.locations[0]['id'] != undefined) {
self.loadLocationForms(res.data.data.locations[0]['id']);
}
}).catch((error) => {
console.log(error)
})
} else {
self.locationNotExistAlert = true;
self.$store.commit('hideLoader');
}
}).catch((error) => {});
}
},
In this when I change a select box value the ajax will get called. It changes values simeltaneously some time I get the error.
Level 50
@davidpd you state earlier you got 500 errors :)
I think before you do anything you should make a decision of Vuex.
Your code has an odd mixture of Vuex and raw axios calls, which belong in your store (i.e. as an action). separate to the Vue component.
Whilst I can't read all your code as you haven't formatted it correctly, it appears you have a lot of going on in the mounted() call. Try counting how many API requests your component makes. Then try setting dynamic variables to a fixed variable to avoid an API call - does your app still hang?
Level 53
You may be running into a common issue of component reuse in Vue. Use $nextTick per the docs.
Please or to participate in this conversation.