axios.post.then is called triggered after everything else - vue.js

Question

I am trying to create a project where a person can create a question and an answer. I am using laravel and Vuex.
I would like to create a variable called Question_id with the response.data after I have called the axios.post to create the question. I would then like to call a function with this Question_id.
I am now noticing though that I cannot do this because when I try to set the question_id variable in .then portion of my axios.post, it happens after I call the other function. In other words, the .then portion happens after all my other code has ran.
qaForm(){
axios
.post("/api/question/create", this.questionForm)
.then(response => {
question = response.data;
question_id = question.id;
})
.catch(error => {
console.log(error.response);
});
addQuestion(question_id);
}
I can confirm this my consoling.out different steps. If I run this experiment:
qaForm(){
console.log("before axios post"); // runs 1st
axios
.post("/api/question/create", this.questionForm)
.then(response => {
console.log("inside axios.then"); // runs 3rd
question = response.data;
question_id = question.id;
})
.catch(error => {
console.log(error.response);
});
console.log("after axios post"); // runs 2nd
addQuestion(question_id);
}
I receive:
before axios post
after axios post
inside axios.then
Why is it this way? Am I making any mistakes? What are some possible workarounds?

Answer 1

Axios requests are asynchronous, and as such return a promise. That is why the code within then() is executed after the code that is below.
the simple fix is to move the code inside the response handler
qaForm(){
console.log("before axios post"); // runs 1st
axios
.post("/api/question/create", this.questionForm)
.then(response => {
console.log("inside axios.then"); // runs 2nd
question = response.data;
question_id = question.id;
console.log("after axios post"); // runs 3rd
addQuestion(question_id);
})
.catch(error => {
console.log(error.response);
});
}
This may seem a little strange when you first see it, it is my preferred way of dealing with asynchronous functions.
The JavaScript language however introduced async-await functionality that would allow you to rewrite the code in a way that you might find more intuitive though.
Note the use of async and await in the code.
async q0aForm() {
console.log("before axios post"); // 1st
let response = await axios.post("/api/question/create", this.questionForm)
console.log("no more axios.then"); // 2nd
question = response.data;
question_id = question.id;
console.log("after axios post"); // 3rd
addQuestion(question_id);
}

Answer 2

I saw your previous code, and everything is working right since is an axios petition. you could try for example in your store something like this.
async actionStore(){
const response = await axios.post('/api/question/create', this.questionForm;
if(isok){
//commit to store
return something;
} else return some error;
}
then in your method inside your component try this.
qaForm()
{
actionStore().then((response)=>{
if(response isok)
addQuestion(question_id);
});
}
It's just an example, cause I can't see all your code right now
remember that actions from store return promises.

Answer 3

If your using '.then' with POST, that my choise.
const blaBla = () => {
const POINT = '{YOUR POINT URL}'
const URL = '{YOUR POST VARIABLES}'
axios({
url: POINT,
data: `producturl=${URL}`,
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then((res) => console.log('res', res.data.content))
}
end worked
blaBla()