In my Nativescript Vue.js application, there is a functionality where the user clicks on login, Axios makes a call to an endpoint to fetch a token.
However, I noticed that when the emulator phone is offline, the Axios call still goes through and the 'then' block gets executed as if the request was successful. Upon checking the network tab, I see that the request is pending indefinitely while the Axios call returns immediately.
Surprisingly, this issue doesn't occur when running Axios in a browser-based application.
Below is the code snippet for this:
methods:{
submit()
{ this.axios.post('https://backendauth.free.beeceptor.com/api/login',this.user)
.then((response) => {
console.log('Detected as a success')
console.log(response.status)
console.log(response)
console.log(response.data.success.token)
this.data = JSON.stringify(response.data)
this.$navigateTo(this.$router['home'])
}).catch((err)=>{
if (err.response.status === 401) {
console.log(err)
}
else
{
console.log(err.response)
}
})
this.submitting = 'form clicked'
}
I have a repository showcasing this issue:
https://github.com/jachno/basicAuth
The following image demonstrates the console log when the device is online:
https://i.sstatic.net/58Ktz.png
Similarly, this image shows the successful network call:
https://i.sstatic.net/uAwLo.png
Conversely, here's the image of the pending network request when the device is in flight mode:
https://i.sstatic.net/HjbIG.png
Finally, check out how the console looks like when the device is in flight mode: