axios.post.then вызывается после всего остального

Question

Я пытаюсь создать проект, в котором человек может создать вопрос и ответ.Я использую Laravel и Vuex.

Я бы хотел создать переменную с именем Question_id с response.data после того, как я вызвал axios.post для создания вопроса.Затем я хотел бы вызвать функцию с этим Question_id.

Теперь я заметил, что не могу этого сделать, потому что, когда я пытаюсь установить переменную question_id в .then части моего axios.post, это происходит после того, как я вызываю другую функцию.Другими словами, часть .then происходит после запуска всего моего другого кода.

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);
}

Я могу подтвердить это своим утешением.Если я проведу этот эксперимент:

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);
}

Я получу:

before axios post
after axios post
inside axios.then

Почему так происходит?Я делаю какие-либо ошибки?Каковы некоторые возможные обходные пути?

Answer 1

Запросы Axios являются асинхронными и, как таковые, возвращают обещание.Вот почему код внутри then() выполняется после кода ниже.

Простое исправление заключается в перемещении кода в обработчик ответа

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);
    });
}

Это может показаться немногоКак ни странно, когда вы впервые видите это, я предпочитаю работать с асинхронными функциями.

Язык JavaScript, однако, представил функциональность async-await, которая позволит вам переписать код таким образом, который вы найдете более интуитивнымхотя.

Обратите внимание на использование async и await в коде.

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

Я видел ваш предыдущий код, и все работает правильно, поскольку это аксиос петиция.Вы можете попробовать, например, в своем магазине что-то вроде этого.

async actionStore(){
    const response = await axios.post('/api/question/create', this.questionForm;
    if(isok){
     //commit to store
     return something;
    } else return some error;  
}

затем в вашем методе внутри вашего компонента попробуйте это.

qaForm()
        {

            actionStore().then((response)=>{
                if(response isok)
                 addQuestion(question_id);
             });


        }

Это всего лишь пример, потому что я не вижу весь ваш код прямо сейчас, помните, что действия из магазина возвращаютобещания.