When making API calls in my Vue application, they are timing out when called simultaneously. I am using axios to send the data to a VueX store.
I have resorted to using setTimeout to stagger the API calls at different intervals in order to avoid the timeout issue. However, this approach feels inefficient and messy. Is there a better way to achieve the same result without relying on setTimeout, perhaps using async/await?
These API calls are triggered by a button click in the main component.
this.$store.dispatch('undoButton', this.undoBtnAPI)
setTimeout(() =>{
this.$store.dispatch('getSQLData', this.apiQuery)
}, 500)
}, 300)
Below is the code for the API calls in the VueX store:
actions: {
getSQLData (context, query) {
console.log(query + 'query var')
return new Promise(function (resolve, reject) {
console.log('SQL Action Called')
console.log('query var: ' + query)
axios.get(MS_SQL_URL + '/api/' + query)
.then(response => {
this.commit('initialDataUpdate', response.data.recordset)
// console.log(response.data.map(item => item.ProcessSequence))
})
.then(response => {
this.commit('completeDataLoading')
})
.catch(e => {
console.log('SQL API error: ' + e)
this.mssql.push(e)
})
}.bind(this))
},
undoButton (context, query) {
return new Promise(function (resolve, reject) {
axios.get(MS_SQL_URL + '/api/' + query)
.then(response => {
this.commit('initialUndoButtonData', response.data.recordset[0]['CSN'])
})
.then(response => {
this.commit('completeUndoDataLoading')
})
.catch(e => {
console.log(`SQL ERROR ${e}`)
this.mssql.push(e)
})
}.bind(this))
}
}