Question

我正在尝试创建一个项目，一个人可以创建一个问题和一个答案。我正在使用laravel和Vuex。

在我调用axios.post创建问题之后，我想使用response.data创建一个名为Question_id的变量。然后，我想用这个Question_id调用一个函数。

我现在注意到我无法执行此操作，因为当我尝试在axios.post的.then部分中设置question_id变量时，它会在调用其他函数之后发生。换句话说，.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请求是异步的，因此返回一个Promise。这就是为什么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

我看到了您以前的代码，由于axios请愿书，一切正常。例如，您可以在商店中尝试类似的操作。

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


        }

这只是一个例子，因为我现在看不到所有代码请记住，来自商店退货承诺的行动。

axios.post.then在其他所有事件之后被触发

2 个答案: