Every Second axios call in Vuejs is slow - vuejs2

Question

I am using Vuejs 2.6.11 with Vuex 3.2.0 and axios v0.19.2 and have a vary peculiar issue that I also reported on in this stackoverflow questions : Every Second Vuex Commit to the same action is slow
I have eliminated the backend as not being the issue as I am calling the same backend endpoint from an Angular 1 app and other places with no issues with all calls being consistently fast after the first call.
I also tested the axios call without using vuex directly in the component, but I get exactly the same issue.
Below is the axios call in my local component.
async getDataLocal() {
// this.showCollapse = !this.showCollapse
// this.$store.dispatch('getData', {TableId: this.TableId, ViewId: this.ViewId, PageNumber: this.PageNumber, PageSize: this.PageSize })
await this.$axios
.$get(
'/scad/TablesV2/' +
this.TableId +
'/data?ViewId=' +
this.ViewId +
'&PageNumber=' +
this.PageNumber +
'&PageSize=' +
this.PageSize
)
.then(
response => {
this.items = response
},
error => {
reject(error)
}
)
},
and here is the results from network traffic in Chrome. I did the calls about 1 second apart.
Below is the code for my vuex action.
return new Promise((resolve, reject) => {
let ParameterList = payload.ParameterList || {}
vuexContext.commit('loading', true)
this.$axios
.$get(
'/scad/tablesv2/' +
payload.TableId +
'/data.json?ViewId=' +
payload.ViewId +
'&PageNumber=' +
payload.PageNumber +
'&PageSize=' +
payload.PageSize,
{
params: { ParameterList: payload.ParameterList },
crossdomain: true,
withCredentials: true
}
)
.then(
response => {
const result = {
TableId: payload.TableId,
ViewId: payload.ViewId,
PageNumber: payload.PageNumber,
PageSize: payload.PageSize,
data: response
}
vuexContext.commit('getData', result)
resolve(result)
},
error => {
vuexContext.commit('setError', error.response)
reject(error)
}
)
vuexContext.commit('loading', false)
})
and here is the network traffic in Chrome to the same endpoint. Again 1 second apart
and here is the network traffic to the same endpoint from an angular 1 app.
I searched the internet but was unable to find anything related.

Answer 1

I ran into the same issue while working on a vue.js application with axios.
I found that the delay is due to using localhost in a Chromium-based browser on Windows OS. When viewing the details of each network request you can see that every second axios request is performing a DNS lookup.
If you replace localhost in your address bar with 127.0.0.1 the delay will be gone.