Reputation: 879
I am trying to build a registration using axios and run into some issue. Is it possible in an axios call to submit data to the backend and immediately after refreshing the page to a new one, without returning back to the axios call?
Currently, I have this solution:
axios.post('/traveller-register', this.form.data)
.then(function(response){
toastr.success(response.data.status);
setTimeout(function(){
window.location = response.data.redirect;
}, 6000);
})
It shows a success message after returning successfully, then redirects after a certain amount of time, but what I would like to have is when the call returns to send it to a different page directly without returning to axios, is that possible somehow?
I am using laravel as a backend, and axios / vue for frontend.
Upvotes: 0
Views: 1127
Reputation: 879
For those who run into a similar issue, the solution I found now was to save the needed data into session storage of the browser after respone from axios and display the message on page redirect:
Setting message before reload:
axios.post('/register', this.form.data)
.then(function(response){
sessionStorage.setItem("flashmessage", response.data.status); // status message
window.location = response.data.redirect // route for redirection
}
Getting message and displaying it on page reload once:
<script>
if (sessionStorage.flashmessage) {
toastr.success(sessionStorage.flashmessage);
sessionStorage.removeItem('flashmessage');
}
</script>
I used the information from here: https://www.w3schools.com/jsref/prop_win_sessionstorage.asp
Upvotes: 2
Reputation: 32748
No, its not possible. You need the then()
function to exist to trigger the resolution of the Axios call and thus the firing off that HTTP request.
If you dont want a delay just remove the 6 second timeout delay?
Upvotes: 1